/* Sahtu Press design tokens.
   Source: _Brand/tokens.json + brand.md. Change values there first, then here.
   Layout sizes borrowed from the old Squarespace site; branding is ours. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Mono";
  src: url("../fonts/noto-sans-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Lao";
  src: url("../fonts/noto-sans-lao-lao-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0E80-0EFF;
}

/* Every value the site uses lives here, grouped by prefix. The /design-system page
   reads this file and shows each token, so a comment after a value is its rule. */
:root {
  /* Color: brand */
  --color-black: #000000;          /* Sahtu Black: text, logo */
  --color-white: #FFFFFF;          /* page background */
  --color-paper: #F7F4EE;          /* Sahtu Paper: alternating sections, footer, callouts */
  --color-navy: #172A36;           /* Sahtu Navy: secondary text and ink lines, never a background */
  --color-orange: #ED6206;         /* Action Orange: buttons and links that do something, nothing else */
  --color-orange-hover: #C44E03;   /* hover and pressed */
  --color-orange-disabled: #F5B88E; /* disabled buttons */
  --color-line: #E4DFD5;           /* rules and borders, a shade darker than Paper */

  /* Color: roles (use these in components, not the brand names) */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-paper);
  --color-text: var(--color-black);
  --color-text-muted: var(--color-navy);
  --color-action: var(--color-orange);
  --color-action-hover: var(--color-orange-hover);
  --color-action-disabled: var(--color-orange-disabled);
  --color-on-action: var(--color-white);

  /* Font families. Lao glyphs fall through to Noto Sans Lao in every stack. */
  --font-heading: "Newsreader", "Noto Sans Lao", Georgia, serif;  /* headings, wordmark, pull quotes */
  --font-body: "Noto Sans", "Noto Sans Lao", system-ui, sans-serif; /* body, UI, captions, buttons */
  --font-mono: "Noto Sans Mono", "Noto Sans Lao", ui-monospace, monospace; /* meta: dates, tags, prices, counts */

  /* Font weights */
  --weight-body: 400;
  --weight-heading: 600;
  --weight-bold: 700;

  /* Type scale: the old Squarespace sizes, kept until the new type scale (Nor, 2026-10-21) */
  --text-display: clamp(2.5rem, 1.6rem + 3.4vw, 4rem); /* page-head titles only, 40 to 64px (added 2026-10-21 for the premium look) */
  --text-h1: clamp(2.1rem, 1.5rem + 2.2vw, 3.05rem);  /* page titles, 34 to 49px */
  --text-h2: clamp(1.6rem, 1.3rem + 1vw, 1.95rem);    /* sections, article and product titles, 26 to 31px */
  --text-h3: 1.5rem;       /* 24px */
  --text-h4: 1.125rem;     /* 18px, card titles, prices */
  --text-lead: 1.25rem;    /* 20px, intro paragraphs, footer mission */
  --text-body: 1.0625rem;  /* 17px */
  --text-sm: 0.875rem;     /* 14px, captions, footer */
  --text-meta: 0.8125rem;  /* 13px, dates, tags */

  /* Line height and tracking */
  --leading-heading: 1.1;
  --leading-quote: 1.3;
  --leading-lead: 1.5;
  --leading-body: 1.6;
  --tracking-heading: -0.01em;
  --tracking-display: -0.02em;  /* page titles */
  --tracking-caps: 0.14em;      /* small spaced capitals: labels above titles */
  --underline-offset: 0.3em;    /* links sit well clear of their underline */
  --weight-display: 500;        /* page titles: lighter reads more refined at large sizes */
  --tracking-body: normal;

  /* Space: one scale for margins, padding and gaps */
  --space-1: 0.25rem;      /* 4px */
  --space-2: 0.5rem;       /* 8px */
  --space-3: 1rem;         /* 16px */
  --space-4: 1.5rem;       /* 24px */
  --space-5: 2.5rem;       /* 40px */
  --space-6: 4rem;         /* 64px */
  --space-7: 5.5rem;       /* 88px, between page sections */

  /* Layout widths. Breakpoint: 48rem (768px); CSS can't read tokens in media queries. */
  --width-text: 42rem;     /* reading column, about 85 characters (Nor, 2026-10-21) */
  --width-page: 75rem;     /* everything else */
  --gutter: 6vw;           /* side gutter, 1rem on phones */
  --size-logo: 2.5rem;     /* header mark height */
  --size-thumb: 8rem;      /* product card picture */
  --size-card: 14rem;      /* minimum card width in grids */
  --size-card-sm: 9rem;    /* small cards, dropdown width */
  --size-cover: 36rem;     /* tallest an article cover gets */
  --size-control: 3rem;    /* height of buttons, inputs and dropdowns, so they line up */

  /* Shape */
  --radius: 16px;          /* images, cards, buttons, embeds */
  --radius-sm: 3px;        /* book covers: objects, not cards */
  --border: 1px solid var(--color-line);
  --border-control: 1px solid #CFC8BA; /* form fields: a step darker than --color-line so they read as fields */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23172A36' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --focus: 2px solid var(--color-action);
  --shadow: 0 0.5rem 1.5rem rgb(23 42 54 / 0.12);  /* navy ink, soft: dropdowns and lifted cards */
  --shadow-sm: 0 1px 0.75rem rgb(23 42 54 / 0.08); /* header once the page scrolls */
  --ratio-card: 4 / 3;     /* article pictures */
  --ratio-product: 3 / 4;  /* product pictures, portrait */
  --ratio-book: 3 / 4;     /* book covers, portrait */
  --book-depth: 2rem;      /* page block seen when a book turns on hover */
}

/* Dark mode follows the visitor's system setting. Only role tokens change; components
   never name a mode. Night is near-black ink, not Navy (Navy is never a background). */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;              /* page background at night */
    --color-bg-alt: #1C1A17;          /* warm night Paper: alternating sections, footer */
    --color-text: var(--color-paper); /* Paper reads softer than pure white */
    --color-text-muted: #AEB8BE;      /* Navy lifted for dark backgrounds */
    --color-action-hover: #F47B2B;    /* hover lightens at night */
    --color-action-disabled: #6E3A16;
    --color-line: #34302A;
    --border-control: 1px solid #4A453D;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23AEB8BE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.5);
    --shadow-sm: 0 1px 0.75rem rgb(0 0 0 / 0.4);
  }
}

@media (max-width: 47.99rem) {
  :root { --gutter: 1rem; }
}