/* ============================================================
   Atlas Design Language (ADL) — Design Tokens
   Source of truth: design/06-ATLAS-DESIGN-LANGUAGE.md
   Rule: NO hardcoded values in components — always use a token.
   ============================================================ */
:root {
    /* ── Color (CHAPTER 4) ─────────────────────────────────── */
    --color-primary:        #111111; /* Primary Black */
    --color-bg:             #FFFFFF; /* Background   */
    --color-surface:        #FAFAFA; /* Surface      */
    --color-border:         #EAEAEA; /* Border       */
    --color-text:           #111111;
    --color-text-2:         #666666; /* Text Secondary */

    /* Accent — ONLY for CTA / active / highlight / progress. Never dominant. */
    --color-accent:         #2563EB; /* Electric Blue */
    --color-accent-2:       #FBC531; /* Gold BIGS     */
    --color-accent-contrast:#FFFFFF;

    /* Semantic (muted) */
    --color-success:        #1F9D57;
    --color-warning:        #C2761A;
    --color-danger:         #C5322B;
    --color-info:           #2563EB;

    /* Semantic SOFT — untuk badge/chip status (bg + border + ink).
       Menggantikan hex hardcoded yang sebelumnya bertebaran di view ruang kerja. */
    --color-success-soft:        #E5F6EC;
    --color-success-soft-border: #BFE3CB;
    --color-success-ink:         #167540; /* digelapkan agar lulus WCAG AA (4.5:1) di atas soft */
    --color-info-soft:           #E8F0FE;
    --color-info-soft-border:    #C3D7F5;
    --color-info-ink:            #1A4D8F;
    --color-warning-soft:        #FDF6E3;
    --color-warning-soft-border: #E8D9A8;
    --color-warning-ink:         #8A6D1F;
    --color-danger-soft:         #FDEAEA;
    --color-danger-soft-border:  #EBC7C7;
    --color-danger-ink:          #A13636;
    --color-gold-ink:            #7A5E1F; /* goldenrod aksen teks — digelapkan agar lulus WCAG AA (semula #B8860B gagal 3.25:1) */
    --color-text-3:              #888888; /* teks paling redup (meta/hint) */

    /* Editorial badge colors (CHAPTER 20) */
    --editorial-breaking:   #C5322B; /* red    */
    --editorial-explainer:  #2563EB; /* blue   */
    --editorial-analysis:   #6D5BD0; /* purple */
    --editorial-opinion:    #666666; /* grey   */
    --editorial-human:      #1F9D57; /* green  */

    /* ── Typography (CHAPTER 5) ────────────────────────────── */
    --font-ui:      'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-reading: 'Source Serif 4', Georgia, 'Times New Roman', serif;

    --text-hero:    48px;
    --text-h1:      40px;
    --text-h2:      32px;
    --text-h3:      24px;
    --text-body:    18px;
    --text-small:   16px;
    --text-caption: 14px;
    --text-meta:    12px;

    --leading-tight: 1.2;
    --leading-normal: 1.6;
    --tracking-tight: -0.02em;

    /* ── Spacing (CHAPTER 7 — 8px grid, no random numbers) ─── */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;

    /* ── Radius (CHAPTER 8) ────────────────────────────────── */
    --radius-button: 12px;
    --radius-card:   16px;
    --radius-modal:  20px;
    --radius-input:  12px;

    /* ── Shadow (CHAPTER 9 — only 3 levels) ────────────────── */
    --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
    --shadow-md: 0 4px 12px rgba(17, 17, 17, 0.08);
    --shadow-lg: 0 12px 32px rgba(17, 17, 17, 0.12);

    /* ── Layout & Motion ───────────────────────────────────── */
    --container: 1280px;
    --motion-fast: 150ms;
    --motion-base: 200ms;
    --motion-slow: 250ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
}