/* ============================================================
   셔틀아이디 (Shuttle ID) — Design Tokens
   Sourced from: client/lib/utils/styles.dart (RideColor / RideStyle)
   Font sourced from: client/pubspec.yaml (NotoSans CJK KR)
   ============================================================ */

/* ---------- Web fonts ----------
   500 (Medium) is the *bundled* brand file — see fonts/NotoSansKR-Medium.otf.
   The Google Fonts import supplies the other weights we use (400/700/800 +
   Inter 700/800). When the user uploads more local files, add @font-face
   blocks below before falling back to the Google import. */
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/NotoSansKR-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/NotoSansKR-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/NotoSansKR-Bold.otf") format("opentype");
}
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@800&family=Inter:wght@700;800&display=swap");

:root {
  /* ============ FAMILIES ============ */
  --font-sans: "Noto Sans KR", "NotoSans", "Apple SD Gothic Neo",
    -apple-system, BlinkMacSystemFont, sans-serif;
  --font-numeric: "Inter", "Noto Sans KR", sans-serif;

  /* ============ BRAND PALETTE ============ */
  /* Primary brand yellow — used on every primary CTA, brand mark, route lines */
  --color-brand: #ffd300;            /* RideColor.button */
  --color-brand-soft: #ffe56a;       /* RideColor.yellow — accent / highlight */
  --color-brand-tint: #fff8d6;       /* RideColor.lightYellow — banner bg */
  --color-brand-on: #524846;         /* RideColor.fontButton — text ON yellow */

  /* Enterprise blue — used for B2B/managerial accents (stats, links, “시작”) */
  --color-enterprise: #4584ff;       /* RideColor.enterprise */
  --color-enterprise-soft: #93aaff;  /* RideColor.lightBlue */
  --color-enterprise-tint: #eef6ff;  /* RideColor.whiteBlue */
  --color-enterprise-link: #375bdb;  /* RideColor.fontBlue */

  /* ============ NEUTRALS ============ */
  --color-bg: #ffffff;               /* Scaffold default */
  --color-bg-soft: #f8f8f8;          /* RideColor.background — tab bar, segments */
  --color-line: #efefef;             /* RideColor.line — dividers, disabled bg */
  --color-gray: #dddddd;             /* RideColor.gray — dividers, secondary btn */

  /* ============ TYPOGRAPHY TOKENS (text colors) ============ */
  --color-fg: #3c3c3c;               /* RideColor.font — primary copy */
  --color-fg-gray: #7e7e7e;          /* RideColor.fontGray — secondary copy */
  --color-fg-light: #b8b8b8;         /* RideColor.fontLightGray — hint / disabled */
  --color-fg-marker: #524846;        /* RideColor.fontMarker — text on yellow */

  /* ============ SEMANTIC ============ */
  --color-danger: #ff5c00;           /* RideColor.fontRed — required *, errors */
  --color-warn-text: #ffb800;        /* RideColor.fontYellow */
  --color-success: #6fd365;          /* legacy green used for live indicators */
  --color-attention: #ff7d53;        /* RideColor.red — notification dot */

  /* Soft container colors (for icon backgrounds at ~10% alpha) */
  --color-red-soft: #ffa7a7;         /* RideColor.lightRed */
  --color-red-tint: #ffe0d6;         /* RideColor.whiteRed */
  --color-orange-tint: #fff2ee;      /* RideColor.whiteOrange */
  --color-green-tint: #ecfef2;       /* RideColor.lightGreen */
  --color-purple: #7a50df;           /* RideColor.purple */
  --color-purple-tint: #f1e7f9;      /* RideColor.lightPurple */

  /* ============ SHADOWS ============ */
  --shadow-card: 0 1px 6px 0 rgba(34, 34, 34, 0.082);   /* RideStyle.shadow() w/ shadow21 */
  --shadow-card-hover: 0 2px 10px 0 rgba(34, 34, 34, 0.12);
  --shadow-pop:  0 4px 16px 0 rgba(34, 34, 34, 0.18);
  --shadow-inset-photo: 0 0 12px 6px rgba(0, 0, 0, 0.25) inset,
                        0 0 12px 0 rgba(0, 0, 0, 0.25);  /* Phone-mockup shadow */

  /* ============ RADII ============ */
  --radius-pill: 999px;
  --radius-chip: 20px;               /* Yellow pill buttons (인증요청, 확인) */
  --radius-dialog: 20px;             /* RideDialog */
  --radius-card: 12px;               /* RideStyle.decoration default */
  --radius-button: 10px;             /* ElevatedButton — primary CTA */
  --radius-icon: 10px;               /* 36×36 colored icon chip in lists */
  --radius-icon-lg: 12px;            /* 44×44 colored icon chip in menus */

  /* ============ SPACING (4-pt grid + Flutter SizedBox conventions) ============ */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 28px;
  --space-11: 32px;
  --space-12: 36px;

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;

  /* ============ TYPE SCALE (mirrors RideStyle.text + screen overrides) ============ */
  /* Defaults: letter-spacing -0.04em, line-height 1.33 */
  --tracking-tight: -0.04em;
  --leading-tight: 1;       /* used on display + button labels */
  --leading-body: 1.33;
  --leading-relaxed: 1.45;
}

/* ============ ELEMENT BASELINE ============ */
html, body {
  font-family: var(--font-sans);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ SEMANTIC TYPE CLASSES ============ */
/* Display — marketing 1080×1920 hero copy (Figma 1.0.5).  58px / 76px line-height */
.t-display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 58px;
  line-height: 76px;
  letter-spacing: var(--tracking-tight);
  color: #000;
}

/* H1 — Tab titles (홈, 운영 관리, 통계, 마이) */
.t-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

/* H2 — Step heading on flows (아이디와 비밀번호를 입력하세요). 24/700 */
.t-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

/* H3 — AppBar title, welcome */
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

/* H4 — Section card title */
.t-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

/* Body — default text */
.t-body {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}
.t-body-regular { font-weight: 400; }

/* Body small — meta info under titles */
.t-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-gray);
}

/* Field title — “* 아이디” label */
.t-field-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

/* Caption — counters, hints, meta below cards */
.t-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-gray);
}

/* Button label */
.t-button {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-brand-on);
}

/* Display number — stats hero (42/800), departure clock (36/700) */
.t-stat {
  font-family: var(--font-numeric);
  font-weight: 800;
  font-size: 42px;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-enterprise);
}
.t-clock {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 36px;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-enterprise);
}