/*
 * Design tokens for 우리 반 생태계 (picture-book diorama direction).
 * Ecosystem palettes switch with [data-map]; seasons with [data-season];
 * ecosystem health mood with [data-mood]. See docs/design.md.
 */

/* Self-hosted subset fonts (OFL, pnpm fonts). Eco Sans is Pretendard Variable reduced and
   renamed (Reserved Font Name): see public/fonts/NOTICE-EcoSans.txt. A character missing
   from a subset falls back to the system Korean fonts of the stack. */
@font-face {
  font-family: 'Jua';
  src: url('/fonts/Jua-Regular.subset.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Eco Sans';
  src: url('/fonts/EcoSans.subset.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* ---- type ---- */
  --font-display: 'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-ui: 'Eco Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
  /* modular scale 1.25 from 16px; display sizes clamp for phone→TV */
  --fs-xs: 0.8125rem;   /* 13 — never for kids' copy */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-md: 1.0625rem;   /* 17 — body on phones */
  --fs-lg: 1.3125rem;   /* 21 */
  --fs-xl: 1.625rem;    /* 26 */
  --fs-2xl: 2.0625rem;  /* 33 */
  --fs-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --fs-hero: clamp(2.6rem, 1.2rem + 6vw, 6.5rem);
  --lh-tight: 1.15;
  --lh-body: 1.55;

  /* ---- space (4px base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --gutter: clamp(16px, 3vw, 40px);

  /* ---- radius: by role, not one size for all ---- */
  --r-chip: 999px;      /* pills, chips */
  --r-control: 18px;    /* buttons, inputs */
  --r-panel: 26px;      /* sheets, panels */
  --r-blob: 42% 58% 55% 45% / 52% 44% 56% 48%; /* organic badges */

  /* ---- core ink & paper (shared by every map) ---- */
  --ink: #1F2B1C;          /* text, illustration outline */
  --ink-soft: #4A5844;     /* secondary text (7.0:1 on paper) */
  --paper: #EEF2E0;        /* page */
  --paper-hi: #FAFCF2;     /* raised surface */
  --paper-lo: #DCE4C8;     /* sunken surface, tracks */
  --line: #BCC8A6;
  --white: #FFFFFF;

  /* ---- shadows: paper-cut, hard offset + soft ambient ---- */
  --shadow-cut: 0 3px 0 rgba(31, 43, 28, 0.18);
  --shadow-lift: 0 3px 0 rgba(31, 43, 28, 0.16), 0 14px 30px -12px rgba(31, 43, 28, 0.35);
  --shadow-press: 0 1px 0 rgba(31, 43, 28, 0.2);

  /* ---- role language (shape + colour) ---- */
  --role-producer: #4E9A2F;      /* 새잎 — leaf badge */
  --role-producer-tint: #DDEFC9;
  --role-consumer: #D99A0B;      /* 해바라기 — round badge */
  --role-consumer-ink: #6B4A00;
  --role-consumer-tint: #FBEBC2;
  --role-upper: #C9711F;         /* 노을 — round badge, double ring */
  --role-upper-tint: #F8DDC4;
  --role-apex: #4B4F9C;          /* 밤하늘 — pointed badge */
  --role-apex-tint: #DCDDF2;
  --role-decomposer: #8A5590;    /* 버섯 — scalloped badge */
  --role-decomposer-tint: #EBDCEB;

  /* ---- population status (always paired with an icon + word) ---- */
  --ok: #2F7D43;
  --ok-tint: #D6ECD3;
  --over: #B9511A;       /* 너무 많아요 ▲ */
  --over-tint: #FBE0CF;
  --under: #3A6EA8;      /* 너무 적어요 ▼ */
  --under-tint: #D7E4F3;
  --gone: #7C8378;       /* 사라졌어요 (알 하나) */
  --gone-tint: #E3E5DF;

  /* ---- v3 status cells, face ring, badges (docs/archive/design-v3-island.md 12.3) ----
     Each state has a fill (cells, ring arc; ink glyph and text on it), an ink tone (coloured
     text on paper) and a tint (soft backgrounds). --ok is the v2 green kept as is: it is the
     deep tone, so the green fill is --ok-fill. Colour is never alone: cell count, glyph
     (cell-few / cell-right / cell-many) and a word go with it. */
  --ok-fill: #7CBF5A;
  --ok-ink: #256B37;
  --many: #F5C433;       /* 많아요 (yellow) */
  --many-fill: var(--many);
  --many-ink: #7A5600;
  --many-tint: #FCEFC0;
  --few: #EE7FA6;        /* 적어요 (pink) */
  --few-fill: var(--few);
  --few-ink: #A8285C;
  --few-tint: #FADDE7;
  /* v3 role badges: leaf / paw print / mushroom (role-producer, role-consumer, role-decomposer) */
  --badge-producer: var(--role-producer);
  --badge-producer-tint: var(--role-producer-tint);
  --badge-consumer: var(--role-upper);
  --badge-consumer-tint: var(--role-upper-tint);
  --badge-decomposer: var(--nutrient);
  --badge-decomposer-tint: #EBDDCB;
  /* the wooden sign on the island's shore (모인 방울) */
  --wood: #E2B57A;
  --wood-deep: #8A5A34;

  /* ---- the /chase maps (spec v5 V5): the map chip of the waiting and result screens and the
     teacher's map buttons. A line (border, pressed fill), its ink (text on the tint) and a tint. */
  --map-forest: var(--role-producer);
  --map-forest-ink: #24521A;
  --map-forest-tint: var(--role-producer-tint);
  --map-sea: #1E6F8C;
  --map-sea-ink: #0E3F52;
  --map-sea-tint: #D3EEF0;

  /* ---- things in the world ---- */
  --sun: #F5C433;
  --sun-deep: #E79A12;
  --nutrient: #7A4E2A;     /* 양분 알갱이 */
  --nutrient-hi: #C08A55;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-tap: 120ms;
  --t-ui: 220ms;
  --t-scene: 1600ms;     /* season / mood crossfade */

  /* ---- touch ---- */
  --hit: 48px;           /* minimum target; 44px is the floor */
  --tap-main: 56px;      /* main buttons, round buttons, cards (child design rules) */
  --tap-sub: 48px;       /* secondary buttons, tabs, pills that open something */
  --gap-tap: 8px;        /* space between two targets */

  /* ---- v3 island frame (docs/archive/design-v3-island.md 12.1) ---- */
  --face-ring: 64px;     /* island face ring, top left on tablets and PCs */
  --card-w: 92px;        /* species card: phone shelf */
  --card-h: 112px;
  /* 생물 tab (T29b): the chips row above the grid, and the grid's height with its padding (3 + 6):
     one row and a half of cards, so the cut-off second row says there are more */
  --chips-w: 112px;      /* tablets and PCs: the chips stand in a column left of the grid */
  --chips-h: calc(var(--tap-main) + var(--gap-tap));
  --grid-h: calc(var(--card-h) * 1.5 + var(--gap-tap) + 9px);
  /* what the 생물 tab adds to the shelf over the other tabs' one card row */
  --life-extra: 0px;

  /* ---- 먹이 그물 달리기 /chase (docs/design.md 13) ----
     Team colours of the four seats; red and green are kept for threat and prey only. Colour is
     never alone: a dot goes with the colour's name, rings with a '!' badge or a shape. */
  --team-blue: #3B82F6;
  --team-yellow: #EAB308;
  --team-purple: #A855F7;
  --team-orange: #F97316;
  --threat: #E03131;
  --prey: #2F9E44;
}

/* A phone that is short (360×640): the second row of the grid only peeks. */
@media (max-width: 699.98px) and (max-height: 700px) {
  :root { --grid-h: calc(var(--card-h) + var(--gap-tap) + 28px + 9px); }
}

/* Tablets and PCs (700px wide and up) use the dock with smaller cards. */
@media (min-width: 700px) {
  :root {
    --card-w: 84px;
    --card-h: 104px;
    /* the chips are a column beside the grid (no row above it), and two card rows are in view */
    --chips-h: 0px;
    --grid-h: calc(var(--card-h) * 2 + var(--gap-tap) + 9px);
    /* the dock is as wide on every tab: chips column + 5 cards + room for a scrollbar + padding and borders */
    --dock-w: calc(var(--chips-w) + var(--gap-tap) + var(--card-w) * 5 + var(--gap-tap) * 4 + 20px + 29px);
  }
}

/* A phone on its side: the chips column (3 × 56 + 2 × 8) sets the grid's height. */
@media (min-width: 700px) and (max-height: 520px) {
  :root { --grid-h: calc(var(--tap-main) * 3 + var(--gap-tap) * 2 + 9px); }
}

/* =====================================================================
 * Map palettes. Each map sets its landscape layers for 4 seasons.
 * Layer vars: --sky-top, --sky-bottom, --l-far, --l-mid, --l-near (silhouette)
 * and --l-*-2 (lit edge, lighter), --ground, --accent (season sparkle).
 * ===================================================================== */

/* ---- 숲 (forest) — default ---- */
:root,
[data-map='forest'] {
  --map-deep: #23452A;
  --sky-top: #CFE6D6;
  --sky-bottom: #F5EFCF;
  --l-far: #A7C99A;  --l-far-2: #BBD8AE;
  --l-mid: #6EA457;  --l-mid-2: #88BB6C;
  --l-near: #3F7C37; --l-near-2: #559448;
  --ground: #6B4A2C;
  --accent: #F2B6C4;
}
[data-map='forest'][data-season='summer'] {
  --sky-top: #BFE3F0;  --sky-bottom: #FAF2C4;
  --l-far: #84B97C;  --l-far-2: #9DCB93;
  --l-mid: #3F8C45;  --l-mid-2: #5AA45A;
  --l-near: #2A6A31; --l-near-2: #3D8443;
  --accent: #FFE27A;
}
[data-map='forest'][data-season='autumn'] {
  --sky-top: #F6D9AE;  --sky-bottom: #F9EBCB;
  --l-far: #DDB074;  --l-far-2: #EAC68E;
  --l-mid: #C9702F;  --l-mid-2: #DD8C47;
  --l-near: #8E4A22; --l-near-2: #A95F2F;
  --accent: #E8893A;
}
[data-map='forest'][data-season='winter'] {
  --sky-top: #D5DFEA;  --sky-bottom: #F2F4F6;
  --l-far: #BCC9D5;  --l-far-2: #D0DAE3;
  --l-mid: #7F95A9;  --l-mid-2: #98ABBC;
  --l-near: #566C82; --l-near-2: #6C8298;
  --ground: #8F8A86;
  --accent: #FFFFFF;
}

/* ---- 연못 (pond) ---- */
[data-map='pond'] {
  --map-deep: #1F4A4A;
  --sky-top: #D3EDE6; --sky-bottom: #F4F2D6;
  --l-far: #9FCFB8; --l-far-2: #8BC2AA;
  --l-mid: #5BAE9A; --l-mid-2: #4A9A88;
  --l-near: #2F7F7A; --l-near-2: #23696A;
  --ground: #5E6B3A;
  --accent: #F7D6E6;
}

/* ---- 강 (river) ---- */
[data-map='river'] {
  --map-deep: #1E3F5A;
  --sky-top: #D2E4F2; --sky-bottom: #EFF4E2;
  --l-far: #A9C3B3; --l-far-2: #BFD5C7;
  --l-mid: #5E93B8; --l-mid-2: #82B0D0;
  --l-near: #2F6A92; --l-near-2: #4E8AB2;
  --ground: #8A7656;
  --accent: #CDEBF7;
}

/* ---- 바다 (sea) ---- */
[data-map='sea'] {
  --map-deep: #123E5C;
  --sky-top: #BFE0EE; --sky-bottom: #E9F4F2;
  --l-far: #7FB7CF; --l-far-2: #B5D9E8;
  --l-mid: #3B86AE; --l-mid-2: #9CCDE4;
  --l-near: #1C5C82; --l-near-2: #CFE7F2;
  --ground: #C9B48A;
  --accent: #F28C7E;
}

/* ---- 사막 (desert) ---- */
[data-map='desert'] {
  --map-deep: #6B3A1E;
  --sky-top: #F7DCC0; --sky-bottom: #FCF0D8;
  --l-far: #E8B98A; --l-far-2: #F2CDA6;
  --l-mid: #CF8A52; --l-mid-2: #DFA472;
  --l-near: #A9603A; --l-near-2: #C27A50;
  --ground: #D9A86A;
  --accent: #E35D8A;
}

/* ---- 극지방 (polar sea) ---- */
[data-map='polar'] {
  --map-deep: #1C3550;
  --sky-top: #CBDDF0; --sky-bottom: #F3F6FA;
  --l-far: #B9CCE0; --l-far-2: #F4F8FC;
  --l-mid: #7FA3C6; --l-mid-2: #E2EEF8;
  --l-near: #3C6A95; --l-near-2: #F2F7FB;
  --ground: #F8FBFE;
  --accent: #8FE0D0;
}