/* Rotation design tokens.
   The look borrows from shoebox end-labels and hang tags: quiet tissue-grey paper, indigo ink,
   one signal orange for things the person wants. Contrast pairs were checked against WCAG AA. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-wdth.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-ext-wdth.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Surfaces */
  --paper: #f1f2ee;          /* app background, tissue grey */
  --surface: #ffffff;        /* sheets, forms, label strips */
  --studio: #e6e8e3;         /* neutral tile behind product images */
  --sunken: #e9ebe6;         /* wells, skeletons */

  /* Ink */
  --ink: #1c2042;            /* indigo ink: text, primary actions, owned labels */
  --ink-muted: #525870;      /* secondary text (6.2:1 on paper) */
  --ink-faint: #7a7f94;      /* placeholders and large meta only (3.5:1) */
  --on-ink: #ffffff;         /* text on ink fills */

  /* Lines */
  --line: #d3d6ce;           /* dividers (decorative) */
  --field-border: #868b9e;   /* input and control outlines (3:1 non-text contrast) */

  /* Accent: wishlist and desire */
  --accent: #e8590c;         /* strokes, icons, dashed outlines (3.2:1) */
  --accent-ink: #b4410a;     /* accent text (5:1 on paper) */
  --accent-fill: #b4410a;    /* filled accent buttons */
  --on-accent-fill: #ffffff;
  --accent-soft: #fdeee5;

  /* Status */
  --ok: #1e7a4c;
  --ok-soft: #e7f3ec;
  --warn: #8a5500;
  --warn-soft: #fbf1dc;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --info: #2b4c9b;
  --info-soft: #e8edf8;

  --focus: #e8590c;
  --scrim: rgb(20 22 43 / 0.48);
  --shadow-lift: 0 10px 30px -12px rgb(28 32 66 / 0.35);

  /* Type: Archivo variable. Width carries the hierarchy: wide titles, condensed codes. */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-md: 1rem;       /* 16 */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.3125rem;  /* 21 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-3xl: 2.25rem;   /* 36 */
  --text-4xl: 3rem;      /* 48 */
  --wide: 118%;
  --extra-wide: 125%;
  --condensed: 74%;

  /* Space (4px base) */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s14: 3.5rem;

  /* Radii follow hierarchy: printed labels are nearly square, tiles and sheets are softer. */
  --r-label: 3px;
  --r-control: 10px;
  --r-tile: 14px;
  --r-sheet: 22px;
  --r-pill: 999px;

  --gutter: 16px;
  --content: 1120px;
  --tabbar-h: 64px;
  --topbar-h: 56px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Dark theme: deep indigo night rather than black, same single accent. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14162b;
    --surface: #1c1f3a;
    --studio: #272b49;
    --sunken: #222540;
    --ink: #eceef6;
    --ink-muted: #a6aac2;
    --ink-faint: #80859f;
    --on-ink: #14162b;
    --line: #30345a;
    --field-border: #6e7398;
    --accent: #ff7a33;
    --accent-ink: #ff9a5c;
    --accent-fill: #ff7a33;
    --on-accent-fill: #14162b;
    --accent-soft: #3a2620;
    --ok: #5fd39a;
    --ok-soft: #18352b;
    --warn: #f2b84b;
    --warn-soft: #3a2f17;
    --danger: #ff8a80;
    --danger-soft: #3d1f24;
    --info: #93b1ff;
    --info-soft: #1f2a4d;
    --focus: #ff9a5c;
    --scrim: rgb(5 6 16 / 0.64);
    --shadow-lift: 0 12px 34px -12px rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14162b;
  --surface: #1c1f3a;
  --studio: #272b49;
  --sunken: #222540;
  --ink: #eceef6;
  --ink-muted: #a6aac2;
  --ink-faint: #80859f;
  --on-ink: #14162b;
  --line: #30345a;
  --field-border: #6e7398;
  --accent: #ff7a33;
  --accent-ink: #ff9a5c;
  --accent-fill: #ff7a33;
  --on-accent-fill: #14162b;
  --accent-soft: #3a2620;
  --ok: #5fd39a;
  --ok-soft: #18352b;
  --warn: #f2b84b;
  --warn-soft: #3a2f17;
  --danger: #ff8a80;
  --danger-soft: #3d1f24;
  --info: #93b1ff;
  --info-soft: #1f2a4d;
  --focus: #ff9a5c;
  --scrim: rgb(5 6 16 / 0.64);
  --shadow-lift: 0 12px 34px -12px rgb(0 0 0 / 0.6);
}