/* =============================================================================
   GIC Portal Design System — Tokens v1.0
   Good Idea Company (Ichigo Inc.)
   ========================================================================== */

/* Brings the @font-face rules for Noto Sans JP + JetBrains Mono into the
   token closure. Replace with self-hosted @font-face once font files are
   uploaded; the family names stay identical. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand / Primary ---------- */
  --gic-primary: #2563EB;          /* Blue — brand core */
  --gic-primary-hover: #1D4ED8;
  --gic-primary-pressed: #1E40AF;
  --gic-primary-soft: #EAF2FF;     /* Light tint for backgrounds */
  --gic-primary-on: #FFFFFF;       /* Text/icon on primary */

  /* ---------- Accent ---------- */
  --gic-accent: #FFD13C;           /* Yellow — secondary CTA, highlights */
  --gic-accent-hover: #F5C11F;
  --gic-accent-soft: #FFF6D0;
  --gic-accent-on: #111111;        /* Text on yellow = dark */

  /* ---------- Secondary Palette (for tags, charts, illustrations) ---------- */
  --gic-pink: #FFB8D1;
  --gic-pink-soft: #FFE4EE;
  --gic-green: #73DCB5;
  --gic-green-soft: #D6F4E8;
  --gic-purple: #A78BFA;
  --gic-purple-soft: #EDE4FF;
  --gic-peach: #FFC18A;
  --gic-peach-soft: #FFE8D4;

  /* ---------- Neutrals (text, icons) ---------- */
  --gic-ink-900: #111111;          /* Primary text */
  --gic-ink-700: #333333;          /* Body */
  --gic-ink-500: #666666;          /* Secondary text */
  --gic-ink-400: #999999;          /* Tertiary / disabled text */
  --gic-ink-300: #CCCCCC;          /* Dividers emphasized */
  --gic-ink-200: #E5E7EB;          /* Standard borders */
  --gic-ink-100: #F3F4F6;          /* Subtle dividers */

  /* ---------- Surface ---------- */
  --gic-surface: #FFFFFF;          /* Cards, modals */
  --gic-surface-sunken: #F7F8FA;   /* Page background */
  --gic-surface-raised: #FFFFFF;
  --gic-surface-muted: #FAFAFA;    /* Tables odd rows */

  /* ---------- Semantic ---------- */
  --gic-success: #22C38A;
  --gic-success-soft: #DFF5EA;
  --gic-warning: #F6B23A;
  --gic-warning-soft: #FFF1D6;
  --gic-danger: #E5484D;
  --gic-danger-soft: #FDE2E4;
  --gic-info: #2563EB;
  --gic-info-soft: #EAF2FF;

  /* ---------- Highlight (soft backgrounds for emphasis rows) ---------- */
  --gic-highlight: #FFF6CC;
  --gic-highlight-border: #FFE177;

  /* ---------- Typography ---------- */
  --gic-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "BIZ UDPGothic", Meiryo, sans-serif;
  --gic-font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* Type scale (px) */
  --gic-text-display: 56px;
  --gic-text-h1: 40px;
  --gic-text-h2: 32px;
  --gic-text-h3: 24px;
  --gic-text-h4: 20px;
  --gic-text-body: 16px;
  --gic-text-small: 14px;
  --gic-text-caption: 12px;
  --gic-text-micro: 10px;

  /* Line heights */
  --gic-lh-tight: 1.2;   /* @kind font */
  --gic-lh-snug: 1.4;    /* @kind font */
  --gic-lh-normal: 1.6;  /* @kind font */
  --gic-lh-loose: 1.8;   /* @kind font */

  /* Weights (Noto Sans JP: 400/500/700) */
  --gic-w-regular: 400;  /* @kind font */
  --gic-w-medium: 500;   /* @kind font */
  --gic-w-bold: 700;     /* @kind font */

  /* ---------- Spacing (4px base) ---------- */
  --gic-space-1: 4px;
  --gic-space-2: 8px;
  --gic-space-3: 12px;
  --gic-space-4: 16px;
  --gic-space-5: 20px;
  --gic-space-6: 24px;
  --gic-space-8: 32px;
  --gic-space-10: 40px;
  --gic-space-12: 48px;
  --gic-space-16: 64px;
  --gic-space-20: 80px;
  --gic-space-24: 96px;
  --gic-space-32: 128px;

  /* ---------- Radius ---------- */
  --gic-radius-xs: 4px;   /* Inline tags, micro chips */
  --gic-radius-sm: 8px;   /* Inputs, small buttons */
  --gic-radius-md: 12px;  /* Standard buttons, chips */
  --gic-radius-lg: 16px;  /* Cards */
  --gic-radius-xl: 24px;  /* Hero cards, dialogs */
  --gic-radius-2xl: 32px; /* Feature cards */
  --gic-radius-3xl: 48px; /* Decorative */
  --gic-radius-full: 9999px;

  /* ---------- Shadows / Elevation ---------- */
  /* 01 Subtle — cards at rest */
  --gic-shadow-01: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 1px rgba(17,17,17,0.02);
  /* 02 Low — card on hover, popovers */
  --gic-shadow-02: 0 4px 10px rgba(17, 17, 17, 0.06), 0 2px 4px rgba(17,17,17,0.04);
  /* 03 Medium — dropdowns, modals */
  --gic-shadow-03: 0 12px 28px rgba(17, 17, 17, 0.10), 0 4px 8px rgba(17,17,17,0.04);
  /* 04 High — overlays */
  --gic-shadow-04: 0 24px 48px rgba(17, 17, 17, 0.14), 0 8px 16px rgba(17,17,17,0.06);

  /* Focus ring */
  --gic-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.28);
  --gic-focus-ring-accent: 0 0 0 3px rgba(255, 209, 60, 0.45);

  /* ---------- Motion ---------- */
  --gic-ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --gic-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --gic-dur-fast: 120ms;  /* @kind other */
  --gic-dur-base: 200ms;  /* @kind other */
  --gic-dur-slow: 320ms;  /* @kind other */

  /* ---------- Layout ---------- */
  --gic-content-max: 1280px; /* @kind spacing */
  --gic-sidebar-w: 240px;    /* @kind spacing */
  --gic-header-h: 56px;      /* @kind spacing */
}

/* ---------- Base reset / app shell ---------- */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--gic-font-sans);
  color: var(--gic-ink-900);
  background: var(--gic-surface-sunken);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }