/* wbhatti design system: tokens.

   Shared by the website (universal.css) and any app built on the same
   design system. Colors use light-dark(), so each value is declared once
   and follows the computed color-scheme:

   - default: follows the OS (prefers-color-scheme)
   - <html data-theme="light"> or <html data-theme="dark">: forced

   Dark is the original wbhatti.org palette, unchanged. Light is a
   complement (warm paper, maroon text), with accents deepened to pass
   WCAG AA on both --surface-0 and --surface-1. */

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lora-v16-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/lora-v16-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lora-v16-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-v16-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato-v16-latin-700.woff2') format('woff2');
}

:root {
  color-scheme: light dark;

  /* surfaces                    light       dark */
  --surface-0:       light-dark(#f7f1ea, #402d2b);  /* page */
  --surface-1:       light-dark(#ffffff, #4d3835);  /* cards, nav panel */
  --surface-2:       light-dark(#ffffff, #5a413d);  /* popovers; light relies on shadow */
  --border-subtle:   light-dark(#e3d6cb, #5f4844);

  /* text                                    contrast on surface-0 (L / D) */
  --text-primary:    light-dark(#3a2826, #a2ded0);  /* 12.4 / 8.5 */
  --text-heading:    light-dark(#1d7a57, #6ad4b1);  /*  4.7 / 7.2 */
  --text-link:       light-dark(#17763e, #98fb98);  /*  5.1 / 10.2 */

  /* semantic */
  --color-success:   light-dark(#17763e, #98fb98);
  --color-warning:   light-dark(#8a5a12, #e0b872);
  --color-danger:    light-dark(#a84d40, #d9776a);
  --color-info:      light-dark(#227f8f, #7ec8d1);

  --code-bg:         light-dark(#efe6dc, #212121);
  --shadow-elevation: 0 2px 8px light-dark(rgb(58 40 38 / 0.12), rgb(0 0 0 / 0.5));
  --scrim:           light-dark(rgb(58 40 38 / 0.35), rgb(0 0 0 / 0.5));

  /* fonts */
  --font-serif: 'Lora', Georgia, serif;
  --font-sans: 'Lato', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* type scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px, body copy */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */

  --lh-tight: 1.3;
  --lh-snug: 1.4;
  --lh-normal: 1.5;
  --lh-relaxed: 1.625;

  /* spacing */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */

  /* radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Breakpoints can't be custom properties (not allowed in @media).
     Use these literal values: sm 40rem (640px), md 64rem (1024px),
     lg 90rem (1440px). */
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }