/*
 * Anotoki design tokens (Design D, light Studio).
 *
 * Every colour, font, size and radius the editor uses lives here. Change a value here and
 * it changes everywhere; app.css only references these variables. Values come from the
 * Anotoki Art design system (tokens.json), so keep the two in step.
 */

:root {
  /* ---- UI colour ---------------------------------------------------------------- */
  --paper: #F5F4F1;          /* page ground */
  --surface: #FFFFFF;        /* inputs, cards, selected options */
  --surface-sunk: #ECEAE5;   /* poster stage, order summary */
  --kinari: #EDE6D8;         /* gallery wall behind poster mockups (review screen) */
  --line: #D8D5CE;           /* decoration only */
  --line-control: #8C887F;   /* borders a person must see to operate (3:1) */
  --ink: #17181B;
  --ink-muted: #6B6862;
  --shu: #C2461F;            /* vermilion accent: one primary button, current step, ticks, eyebrows */
  --shu-strong: #9C3615;
  --shu-soft: #F8E3DA;
  --on-shu: #FFFFFF;
  --ai: #2B4566;             /* indigo: links, focus ring, info notes */
  --ai-soft: #E1E7EF;
  --success: #2E6B4A;
  --danger: #9E1C2C;
  --focus-ring: var(--ai);
  --glass: rgba(255, 255, 255, .85); /* floating controls over the stage */

  /* ---- Review room (the close-up's wall; the scenes are photos) ------------------- */
  --room-wall: var(--kinari);

  /* ---- Map moods: the printed product. Never themed. ---------------------------- */
  /* paper + ink colour the poster around the map; land/road/water feed the swatches. */
  --map-toner-lite-paper: #FFFFFF; --map-toner-lite-ink: #3A3A3A;
  --map-toner-lite-land: #FFFFFF;  --map-toner-lite-road: #7E7E7E; --map-toner-lite-water: #D8DADB;
  --map-toner-paper: #FFFFFF;      --map-toner-ink: #000000;
  --map-toner-land: #FFFFFF;       --map-toner-road: #000000;      --map-toner-water: #000000;
  --map-smooth-paper: #FFFFFF;     --map-smooth-ink: #2E2F31;
  --map-smooth-land: #ECEBE7;      --map-smooth-road: #FFFFFF;     --map-smooth-water: #BCD0DA;
  --map-smooth-dark-paper: #1C1D20; --map-smooth-dark-ink: #E9E7E2;
  --map-smooth-dark-land: #26272B; --map-smooth-dark-road: #5C6067; --map-smooth-dark-water: #15171B;
  --map-outdoors-paper: #F7F4EC;   --map-outdoors-ink: #33402F;
  --map-outdoors-land: #F2EEE3;    --map-outdoors-road: #DF9A55;   --map-outdoors-water: #9CC2E3;
  --map-watercolor-paper: #F4EBDA; --map-watercolor-ink: #5B4A36;
  --map-watercolor-land: #EEDFC2;  --map-watercolor-road: #BFA27A; --map-watercolor-water: #8DBAD2;
  --map-terrain-paper: #F6F3EC;    --map-terrain-ink: #2F3A2C;
  --map-terrain-land: #E9E4D2;     --map-terrain-road: #8E8B85;    --map-terrain-water: #A9C9D9;
  /* Creative moods, Protomaps only (src/protomaps.js) */
  --map-sumi-paper: #F3EFE6;       --map-sumi-ink: #1E1E1E;
  --map-sumi-land: #F3EFE6;        --map-sumi-road: #1E1E1E;       --map-sumi-water: #9A9A97;
  --map-kintsugi-paper: #151515;   --map-kintsugi-ink: #D9B872;
  --map-kintsugi-land: #151515;    --map-kintsugi-road: #C9A45C;   --map-kintsugi-water: #0B0B0B;
  --map-neon-paper: #0E0B1F;       --map-neon-ink: #F4E9FF;
  --map-neon-land: #0E0B1F;        --map-neon-road: #FF3EA5;       --map-neon-water: #2EE6FF;
  --map-blueprint-paper: #1F4E8C;  --map-blueprint-ink: #F4F8FF;
  --map-blueprint-land: #1F4E8C;   --map-blueprint-road: #FFFFFF;  --map-blueprint-water: #1A4479;
  --map-handdrawn-paper: #F7F3EA;  --map-handdrawn-ink: #2B2A28;
  --map-handdrawn-land: #F7F3EA;   --map-handdrawn-road: #2B2A28;  --map-handdrawn-water: #8FA5B6;
  --map-edo-paper: #E3C893;        --map-edo-ink: #2A2420;
  --map-edo-land: #E3C893;         --map-edo-road: #C2412D;        --map-edo-water: #2F4A73;
  /* ---- Star map themes: the printed product. Never themed. ---------------------- */
  /* paper + ink colour the poster; bg is the sky inside the chart; star, line (constellations),
     milky (Milky Way glow) and grid colour the chart. Used by src/sky/ and the theme tiles. */
  --sky-midnight-paper: #0F1A2E; --sky-midnight-ink: #EDE6D8; --sky-midnight-bg: #0F1A2E;
  --sky-midnight-star: #FFFFFF;  --sky-midnight-line: #C9D2E3; --sky-midnight-milky: #8FA3C8; --sky-midnight-grid: #8796B5;
  --sky-indigo-paper: #1E3050;   --sky-indigo-ink: #F3EEE2;   --sky-indigo-bg: #1E3050;
  --sky-indigo-star: #FBF7EE;    --sky-indigo-line: #E6DCC5;  --sky-indigo-milky: #8FA2C6;   --sky-indigo-grid: #A9B6CF;
  --sky-noir-paper: #0B0B0D;     --sky-noir-ink: #F2F0EA;     --sky-noir-bg: #0B0B0D;
  --sky-noir-star: #FFFFFF;      --sky-noir-line: #CFCFCF;    --sky-noir-milky: #A5A5A5;     --sky-noir-grid: #8A8A8A;
  --sky-kintsugi-paper: #151515; --sky-kintsugi-ink: #D9B872; --sky-kintsugi-bg: #151515;
  --sky-kintsugi-star: #EBD39A;  --sky-kintsugi-line: #C9A45C; --sky-kintsugi-milky: #A08550; --sky-kintsugi-grid: #8A7342;
  --sky-sumi-paper: #F3EFE6;     --sky-sumi-ink: #1E1E1E;     --sky-sumi-bg: #F3EFE6;
  --sky-sumi-star: #1E1E1E;      --sky-sumi-line: #1E1E1E;    --sky-sumi-milky: #8F8E8A;     --sky-sumi-grid: #8F8E8A;
  --sky-kinari-paper: #EDE6D8;   --sky-kinari-ink: #2B4566;   --sky-kinari-bg: #EDE6D8;
  --sky-kinari-star: #2B4566;    --sky-kinari-line: #C2461F;  --sky-kinari-milky: #9FAEC4;   --sky-kinari-grid: #8C887F;
  --marker: var(--shu);      /* marker icon on the poster */
  --seal: #C4372B;           /* hanko seal ink (shuniku), a little redder than --shu */
  /* Route poster line colours (catalog.js ROUTE.colors; 'ink' uses the mood's own ink) */
  --route-shu: #D2452B;
  --route-indigo: #2D4B7C;
  --route-gold: #C9A042;
  --route-white: #FFFFFF;
  /* Photo + map posters: the boarding pass's colour band (catalog.js PASS.bands), the polaroid */
  --pass-navy: #2F4A7A;
  --pass-shu: #C8442B;
  --pass-ink: #1E1E22;
  --pass-green: #2E6B5E;
  --polaroid: #FFFFFF;
  --polaroid-ink: #2A2A2E;

  /* ---- Frames (colour of the moulding in previews) ------------------------------ */
  --frame-black: #1F1C19;
  --frame-oak: #C8A77E;
  --frame-white: #F7F6F2;
  --frame-none: #E2DFD9;     /* swatch only */
  /* Wood grain laid over the moulding colour: along the top and bottom (-h) and up the sides (-v).
     Oak shows its grain; black and white are painted wood, so only a faint satin texture. Each
     frequency times its tile size is a whole number, so the tiles repeat without a seam. */
  --frame-grain-oak-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='80'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.00625 0.325' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0 0 0 -0.345'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --frame-grain-oak-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='320'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.325 0.00625' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0 0 0 -0.345'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --frame-grain-fine-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='80'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0125 0.5' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0 0 0 -0.115'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --frame-grain-fine-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='320'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.0125' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0 0 0 -0.115'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* ---- Type families: Latin face first, Japanese face of the same character next --- */
  --font-wordmark: "Manrope", "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-display: "Syne", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-sans: "Hanken Grotesk", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, monospace;
  --font-poster-modern: "Montserrat", "Zen Kaku Gothic New", sans-serif;
  --font-poster-elegant: "Playfair Display", "Shippori Mincho", "Noto Serif JP", serif;
  --font-poster-mincho: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-poster-soft: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-poster-condensed: "Oswald", "Zen Kaku Gothic New", sans-serif; /* Condensed, and the Headline layout's name in Modern */
  --font-poster-script: "Kaushan Script", "Yuji Syuku", cursive; /* a brush-pen hand; Japanese in brush calligraphy */
  --font-poster-airy: "Josefin Sans", "M PLUS 1p", sans-serif; /* light geometric capitals */
  --font-poster-roman: "Cormorant Garamond", "Zen Old Mincho", serif; /* classic serif capitals */
  --font-poster-rounded: "Nunito", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif; /* a bold rounded sans */
  --font-poster-bold: "Roboto", "Noto Sans JP", sans-serif; /* tight bold capitals */
  --font-poster-slab: "Zilla Slab", "Zen Antique", serif; /* a slab serif; Japanese in an old-print face */
  --font-poster-typewriter: "Courier Prime", "M PLUS 1 Code", monospace; /* typewritten */
  /* Hanko seal typefaces (no seal-script 篆書 font is free; a licensed one can replace these) */
  --font-hand: "Caveat", "Zen Maru Gothic", cursive;  /* the polaroid's handwritten caption */
  --font-seal-carved: "Zen Old Mincho", "Shippori Mincho", serif;
  --font-seal-brush: "Yuji Boku", "Zen Old Mincho", serif;

  /* ---- Type scale ------------------------------------------------------------- */
  --text-wordmark: 24px;
  --text-display-xl: 54px;   /* the one question per step (desktop) */
  --text-display-l: 30px;    /* the step question on phones, review heading */
  --text-heading: 18px;
  --text-body: 16px;         /* inputs never smaller, so phones don't zoom */
  --text-body-sm: 14px;
  --text-label: 13px;
  --text-caption: 12px;
  --text-micro: 11px;

  /* ---- Spacing (4px base) ----------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 64px;

  /* ---- Radius ----------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;         /* buttons */
  --radius-lg: 14px;         /* inputs, options */
  --radius-xl: 16px;         /* search field, cards */
  --radius-stage: 28px;      /* the poster stage */
  --radius-pill: 999px;
  --radius-none: 0;          /* posters are paper */

  /* ---- Elevation -------------------------------------------------------------- */
  --shadow-poster: 0 20px 50px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
  --shadow-pop: 0 8px 24px rgba(23, 24, 27, .12);

  /* ---- Layout ----------------------------------------------------------------- */
  --header-h: 72px;
  --panel-w: 600px;          /* desktop control panel */
  --review-aside-w: 480px;
  --phone-stage-h: 404px;
}