@layer tokens {
/* ============================================================
   ARCSAFE DESIGN TOKENS
   Layer 1 — tokens.css
   DO NOT put layout, components, or utilities here.
   Only variables.
   ============================================================ */
:root {

  /* --- Color Palette --- */
  --navy:          #1a2744;
  --navy-deep:     #111c36;
  --navy-mid:      #243258;
  --navy-light:    #2e4070;
  --sky:           #6cb4e4;
  --sky-light:     #a8d4f0;
  --sky-pale:      #e8f4fc;
  --sky-dim:       #4a90c4;
  --white:         #ffffff;
  --off-white:     #f5f6f8;
  --surface:       #f0f2f6;
  --surface-alt:   #e8eaf2;
  --border:        #d0d4e4;
  --border-light:  #e4e8f0;

  /* --- Text --- */
  --text-primary:   #1a2744;
  --text-secondary: #4a5470;
  --text-muted:     #7a82a0;
  --text-on-dark:   #e8edf8;
  --text-on-dark-dim: rgba(232,237,248,0.6);

  /* --- Status / Content Type Tokens --- */
  --type-tool:         #1a5fa8;
  --type-tool-bg:      #e0edfb;
  --type-code:         #0d5e3f;
  --type-code-bg:      #e3f4ec;
  --type-case:         #6b3d00;
  --type-case-bg:      #fdf0dc;
  --type-learn:        #4a1d8c;
  --type-learn-bg:     #f0e8fb;
  --type-product:      #1a4a2e;
  --type-product-bg:   #e3f4ec;
  --type-manual:       #5a3e00;
  --type-manual-bg:    #fdf5e0;

  --status-free:    #0d7a4e;
  --status-free-bg: #e6f4ee;
  --status-paid:    #8a5c0a;
  --status-paid-bg: #fef3df;
  --status-new:     #1a5fa8;
  --status-new-bg:  #e0edfb;

  /* --- Category Color Axis --- */
  --cat-ex:         #c0392b;   /* Explosion Protection */
  --cat-ex-bg:      #fdecea;
  --cat-semi:       #8e44ad;   /* Semiconductor */
  --cat-semi-bg:    #f5eafb;
  --cat-msk:        #2471a3;   /* Ergonomics / MSK */
  --cat-msk-bg:     #e8f4fb;
  --cat-pip:        #1a7a4a;   /* Piping / Process */
  --cat-pip-bg:     #e8f8ee;
  --cat-risk:       #d35400;   /* Risk Assessment */
  --cat-risk-bg:    #fdf0e3;
  --cat-legal:      #7c3aed;   /* Legal / Responsibility */
  --cat-legal-bg:   #f5f3ff;
  --cat-com:        #0f766e;   /* Industrial Common */
  --cat-com-bg:     #f0fdfa;
  --cat-common:     #5d6d7e;   /* Industrial Common (legacy alias) */
  --cat-common-bg:  #edf0f4;

  /* --- Typography --- */
  --font-sans:  'Sora', 'Noto Sans KR', sans-serif;
  --font-kr:    'Noto Sans KR', sans-serif;
  --font-mono:  'JetBrains Mono', 'Consolas', monospace;

  /* --- Type Scale --- */
  --text-2xs:  0.6875rem;  /* 11px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1.0625rem;  /* 17px — min body */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* --- Spacing Scale --- */
  --s1:  0.25rem;
  --s2:  0.5rem;
  --s3:  0.75rem;
  --s4:  1rem;
  --s5:  1.25rem;
  --s6:  1.5rem;
  --s8:  2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;

  /* --- Border Radius --- */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(26,39,68,0.06);
  --shadow-sm: 0 1px 4px rgba(26,39,68,0.08);
  --shadow-md: 0 4px 12px rgba(26,39,68,0.10);
  --shadow-lg: 0 8px 24px rgba(26,39,68,0.12);
  --shadow-xl: 0 16px 40px rgba(26,39,68,0.14);

  /* --- Z-index Scale --- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 50;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;

  /* --- Transitions --- */
  --t-fast:   0.1s ease;
  --t-base:   0.15s ease;
  --t-slow:   0.25s ease;

  /* --- Layout --- */
  --max-w:        1120px;
  --max-w-docs:   860px;
  --max-w-narrow: 680px;
  --nav-h:        60px;
  --sidebar-w:    240px;
  --tab-bar-h:    60px;
  --content-px:   1.25rem;   /* mobile horizontal padding */
}

@media (min-width: 768px) {
  :root {
    --content-px: 2rem;
  }
}


  /* --- Note Block Semantic Colors (docs.css 전용) --- */
  --note-warn-bg:      #fff8e1;
  --note-warn-border:  #f0a500;
  --note-warn-text:    #6b4200;
  --note-danger-bg:    #fdecea;   /* = cat-ex-bg */
  --note-danger-text:  #6b0a00;
  --note-tip-text:     #003d22;   /* = status-free text */


  /* --- Category Colors: PUR, SAFE --- */
  --cat-pur:      #0369a1;
  --cat-pur-bg:   #e0f2fe;
  --cat-safe:     #15803d;
  --cat-safe-bg:  #dcfce7;

}