/*
 * gravitor 디자인 토큰. 이 파일이 토큰의 정본이에요(DESIGN.md는 이름과 쓰임만 적어요).
 * 세계: 밤 법랑 노선도. 짙은 남색 법랑 바탕에 도자기 흰 역, 고른 노선이 가장 밝게 빛나요.
 *   목표는 본선, 막힌 완료 조건은 가지, 보류는 대피선, 다른 목표는 다른 노선.
 * 판: 법랑(기본, 회의 모드는 늘 법랑) · 도자기(시스템이 밝음일 때 작업 화면).
 */
@import url("https://fonts.googleapis.com/css2?family=Asta+Sans:wght@300..800&display=swap");

/* 법랑: 기본 판 */
:root {
  color-scheme: dark;
  --ground: oklch(24% 0.062 262);       /* 밤 법랑: 짙은 남색 */
  --ground-2: oklch(20.5% 0.056 262);   /* 옆 칸·도구 줄: 한 단 더 깊게 */
  --ground-3: oklch(30% 0.068 262);     /* 올린 줄·고른 줄 */
  --rule: oklch(35% 0.055 262);
  --rule-strong: oklch(47% 0.05 262);
  --station: oklch(97.5% 0.01 85);      /* 역: 도자기 흰색 */
  --station-ink: oklch(21% 0.055 262);  /* 역 안 글자 */
  --ink: oklch(97% 0.01 85);            /* 도자기 흰 글자 */
  --ink-2: oklch(86% 0.025 250);
  --ink-3: oklch(75% 0.035 255);        /* 바탕에서 5:1 넘게 */
  --ink-on-color: oklch(21% 0.055 262);
  --line-main: oklch(76% 0.13 238);     /* 본선: 법랑 위에서 빛나는 하늘 코발트 */
  --line-1: oklch(81% 0.15 75);         /* 호박 */
  --line-2: oklch(77% 0.11 185);        /* 청록 */
  --line-3: oklch(78% 0.16 145);        /* 초록 */
  --line-4: oklch(75% 0.15 355);        /* 분홍 */
  --line-5: oklch(80% 0.06 70);         /* 모래 */
  --line-other: oklch(56% 0.035 262);
  --accent: var(--line-main);
  --accent-soft: oklch(76% 0.13 238 / 0.18);
  --notice: oklch(87% 0.15 92);
  --notice-ink: oklch(22% 0.055 262);
  --affect: oklch(87% 0.15 92);         /* 영향 곡선 */
  --stop: oklch(71% 0.18 27);
  --stop-soft: oklch(71% 0.18 27 / 0.18);
  --ok: oklch(80% 0.14 150);
  --shadow-float: 0 12px 36px -10px oklch(8% 0.04 262 / 0.7);

  /* 글꼴: 42dot이 차량 화면용으로 만든 Asta Sans. 멀리서도 읽히는 한글·라틴 */
  --font-ui: "Asta Sans", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-id: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; /* id·주소에만 */

  /* 글자 크기: 1.2배 고정 단계(작업 화면은 크기를 화면 폭에 따라 늘리지 않아요) */
  --zoom: 1;
  --lh-tight: 1.25;
  --lh-body: 1.55;

  /* 간격: 4 기준 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* 모양: 조작 4, 판 8, 역·칩은 둥글게 */
  --r-sm: 4px; --r-md: 8px; --r-pill: 999px;

  /* 깊이: 판은 평평하고 선으로 나눠요. 그림자(--shadow-float)는 떠 있는 것(팝오버·끌기)에만 */

  /* 노선도 기하: 선 두께, 역 크기, 칸 간격(회의 모드에서 커져요) */
  --g-line: 6;
  --g-station: 7;
  --g-col: 120;
  --g-lane: 92;

  /* 움직임: 상태를 알릴 때만. 튀지 않는 감속 */
  --m-in: 140ms; --m-out: 200ms; --m-press: 90ms; --m-travel: 240ms; --m-beacon: 2.4s;
  --m-ease: cubic-bezier(.2, .8, .2, 1);
  --m-ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* 글자 크기는 --zoom을 쓰는 곳(바탕과 회의 모드)마다 다시 계산해요 */
:root, [data-room] {
  --t-xs: calc(0.75rem * var(--zoom));    /* 12 */
  --t-sm: calc(0.8125rem * var(--zoom));  /* 13 */
  --t-md: calc(0.9375rem * var(--zoom));  /* 15 본문 */
  --t-lg: calc(1.125rem * var(--zoom));   /* 18 */
  --t-xl: calc(1.375rem * var(--zoom));   /* 22 */
  --t-2xl: calc(1.625rem * var(--zoom));  /* 26 */
  --t-3xl: calc(2rem * var(--zoom));      /* 32 */
}


/* 도자기: 밝은 방·낮 작업. 시스템이 밝음이거나 밝음을 고르면 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground: oklch(98.6% 0.003 250);
    --ground-2: oklch(96.4% 0.006 250);
    --ground-3: oklch(93.6% 0.01 250);
    --rule: oklch(89% 0.01 250);
    --rule-strong: oklch(78% 0.012 250);
    --station: oklch(99.5% 0 0);
  --station-ink: oklch(21% 0.02 258);
    --ink: oklch(21% 0.02 258);
    --ink-2: oklch(40% 0.018 258);
    --ink-3: oklch(50% 0.015 258);
    --ink-on-color: oklch(99% 0 0);
    --line-main: oklch(47% 0.16 258);
    --line-1: oklch(64% 0.17 52);
    --line-2: oklch(56% 0.11 185);
    --line-3: oklch(58% 0.15 140);
    --line-4: oklch(56% 0.18 350);
    --line-5: oklch(50% 0.08 60);
    --line-other: oklch(70% 0.012 258);
    --accent-soft: oklch(47% 0.16 258 / 0.12);
    --notice: oklch(88% 0.16 92);
    --notice-ink: oklch(30% 0.06 80);
  --affect: oklch(45% 0.08 80);
    --stop: oklch(50% 0.2 27);
    --stop-soft: oklch(50% 0.2 27 / 0.12);
    --ok: oklch(52% 0.13 150);
    --shadow-float: 0 8px 28px -10px oklch(20% 0.02 258 / 0.28), 0 1px 2px oklch(20% 0.02 258 / 0.08);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground: oklch(98.6% 0.003 250);
  --ground-2: oklch(96.4% 0.006 250);
  --ground-3: oklch(93.6% 0.01 250);
  --rule: oklch(89% 0.01 250);
  --rule-strong: oklch(78% 0.012 250);
  --station: oklch(99.5% 0 0);
  --station-ink: oklch(21% 0.02 258);
  --ink: oklch(21% 0.02 258);
  --ink-2: oklch(40% 0.018 258);
  --ink-3: oklch(50% 0.015 258);
  --ink-on-color: oklch(99% 0 0);
  --line-main: oklch(47% 0.16 258);
  --line-1: oklch(64% 0.17 52);
  --line-2: oklch(56% 0.11 185);
  --line-3: oklch(58% 0.15 140);
  --line-4: oklch(56% 0.18 350);
  --line-5: oklch(50% 0.08 60);
  --line-other: oklch(70% 0.012 258);
  --accent-soft: oklch(47% 0.16 258 / 0.12);
  --notice: oklch(88% 0.16 92);
  --notice-ink: oklch(30% 0.06 80);
  --affect: oklch(45% 0.08 80);
  --stop: oklch(50% 0.2 27);
  --stop-soft: oklch(50% 0.2 27 / 0.12);
  --ok: oklch(52% 0.13 150);
  --shadow-float: 0 8px 28px -10px oklch(20% 0.02 258 / 0.28), 0 1px 2px oklch(20% 0.02 258 / 0.08);
}

/* 회의 모드는 큰 화면에서 늘 법랑이에요(밝은 시스템에서도) */
[data-room] {
  color-scheme: dark;
  --ground: oklch(24% 0.062 262);       /* 밤 법랑: 짙은 남색 */
  --ground-2: oklch(20.5% 0.056 262);   /* 옆 칸·도구 줄: 한 단 더 깊게 */
  --ground-3: oklch(30% 0.068 262);     /* 올린 줄·고른 줄 */
  --rule: oklch(35% 0.055 262);
  --rule-strong: oklch(47% 0.05 262);
  --station: oklch(97.5% 0.01 85);      /* 역: 도자기 흰색 */
  --station-ink: oklch(21% 0.055 262);  /* 역 안 글자 */
  --ink: oklch(97% 0.01 85);            /* 도자기 흰 글자 */
  --ink-2: oklch(86% 0.025 250);
  --ink-3: oklch(75% 0.035 255);        /* 바탕에서 5:1 넘게 */
  --ink-on-color: oklch(21% 0.055 262);
  --line-main: oklch(76% 0.13 238);     /* 본선: 법랑 위에서 빛나는 하늘 코발트 */
  --line-1: oklch(81% 0.15 75);         /* 호박 */
  --line-2: oklch(77% 0.11 185);        /* 청록 */
  --line-3: oklch(78% 0.16 145);        /* 초록 */
  --line-4: oklch(75% 0.15 355);        /* 분홍 */
  --line-5: oklch(80% 0.06 70);         /* 모래 */
  --line-other: oklch(56% 0.035 262);
  --accent: var(--line-main);
  --accent-soft: oklch(76% 0.13 238 / 0.18);
  --notice: oklch(87% 0.15 92);
  --notice-ink: oklch(22% 0.055 262);
  --affect: oklch(87% 0.15 92);         /* 영향 곡선 */
  --stop: oklch(71% 0.18 27);
  --stop-soft: oklch(71% 0.18 27 / 0.18);
  --ok: oklch(80% 0.14 150);
  --shadow-float: 0 12px 36px -10px oklch(8% 0.04 262 / 0.7);
}

/* 회의 모드: 3–5m 떨어진 자리에서 읽히게 글자·선·역을 키워요 */
[data-room] {
  --zoom: 1.55;
  --g-line: 8;
  --g-station: 9;
  --g-col: 150;
  --g-lane: 112;
}