/* ============================================================
   SMA KEBANGSAAN — DESIGN TOKENS
   tokens/tokens.css

   Satu file ini adalah sumber kebenaran untuk seluruh
   design system. Jangan hardcode nilai warna, spasi, atau
   tipografi di luar file ini.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     WARNA BRAND
     ---------------------------------------------------------- */

  /* Navy — warna primer */
  --color-navy-primary: #002A72; /* ← primer brand (royal navy) */
  --color-blue-sky:     #1a88d7; /* ← biru cerah (biru ke-2) */
  --color-navy-900: #040d1f;
  --color-navy-800: #091529;
  --color-navy-700: #0d1b3e;   /* ← brand navy utama (biru ketiga) */
  --color-navy-600: #16297a;   /* ← biru menengah */
  --color-navy-500: #1e3796;
  --color-navy-400: #3a52b0;
  --color-navy-300: #6478c6;
  --color-navy-200: #a3aedd;
  --color-navy-100: #d2d8ef;
  --color-navy-50:  #eef0f8;

  /* Gold — warna aksen */
  --color-gold-900: #3d2900;
  --color-gold-800: #7a5200;
  --color-gold-700: #a37000;
  --color-gold-600: #c9a227;   /* ← brand gold utama (aksen ke-2) */
  --color-gold-500: #d9b53d;
  --color-gold-yellow: #fcd464; /* ← aksen kuning cerah */
  --color-gold-400: #e5c85f;
  --color-gold-300: #efd98a;
  --color-gold-200: #f7eabb;
  --color-gold-100: #fbf3d9;
  --color-gold-50:  #fdfaef;

  /* Merah — warna aksen ketiga */
  --color-red-900: #2a0606;
  --color-red-800: #550d0d;
  --color-red-700: #8b1a1a;    /* ← brand red utama */
  --color-red-600: #a32d2d;
  --color-red-500: #c44040;
  --color-red-400: #d97070;
  --color-red-300: #e8a0a0;
  --color-red-200: #f3cccc;
  --color-red-100: #f9e5e5;
  --color-red-50:  #fdf3f3;

  /* Netral */
  --color-neutral-950: #0a0a0a;
  --color-neutral-900: #111111;
  --color-neutral-800: #222222;
  --color-neutral-700: #333333;
  --color-neutral-600: #4a4a4a;
  --color-neutral-500: #666666;
  --color-neutral-400: #888888;
  --color-neutral-300: #aaaaaa;
  --color-neutral-200: #cccccc;
  --color-neutral-100: #e5e5e5;
  --color-neutral-50:  #f4f4f4;
  --color-neutral-0:   #ffffff;

  /* Status */
  --color-success-bg:   #eaf3de;
  --color-success-text: #27500a;
  --color-success-bold: #3b6d11;
  --color-warning-bg:   #fff3cd;
  --color-warning-text: #633806;
  --color-warning-bold: #7a4f00;
  --color-danger-bg:    #fcebeb;
  --color-danger-text:  #791f1f;
  --color-danger-bold:  #8b1a1a;
  --color-info-bg:      #e8edf5;
  --color-info-text:    #0d1b3e;
  --color-info-bold:    #185fa5;

  /* ----------------------------------------------------------
     WARNA SEMANTIK (gunakan ini di komponen, bukan nilai raw)
     ---------------------------------------------------------- */

  --color-bg-page:      #ffffff;
  --color-bg-surface:   #f4f4f4;
  --color-bg-elevated:  #ffffff;
  --color-bg-inverse:   #0d1b3e;

  --color-text-primary:   #111111;
  --color-text-secondary: #4a4a4a;
  --color-text-muted:     #888888;
  --color-text-inverse:   #ffffff;
  --color-text-brand:     #0d1b3e;
  --color-text-accent:    #c9a227;

  --color-border-default: #cccccc;
  --color-border-subtle:  #e5e5e5;
  --color-border-strong:  #888888;
  --color-border-brand:   #0d1b3e;
  --color-border-accent:  #c9a227;

  --color-action-primary:         #0d1b3e;
  --color-action-primary-hover:   #16297a;
  --color-action-primary-text:    #c9a227;
  --color-action-secondary:       #c9a227;
  --color-action-secondary-hover: #d9b53d;
  --color-action-secondary-text:  #0d1b3e;

  /* ----------------------------------------------------------
     TIPOGRAFI
     ---------------------------------------------------------- */

  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif; /* alias display */
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Skala ukuran font (Major Third — ratio 1.25) */
  --text-xs:   0.64rem;   /* 10.24px */
  --text-sm:   0.8rem;    /* 12.8px  */
  --text-base: 1rem;      /* 16px    */
  --text-md:   1.25rem;   /* 20px    */
  --text-lg:   1.563rem;  /* 25px    */
  --text-xl:   1.953rem;  /* 31px    */
  --text-2xl:  2.441rem;  /* 39px    */
  --text-3xl:  3.052rem;  /* 49px    */
  --text-4xl:  3.815rem;  /* 61px    */

  /* Bobot font */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Line height */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.16em;

  /* ----------------------------------------------------------
     SPASI (skala 8-point grid)
     ---------------------------------------------------------- */

  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */

  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.08);

  /* ----------------------------------------------------------
     LAYOUT & BREAKPOINT
     ---------------------------------------------------------- */

  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --container-padding: var(--space-6);
  --container-max:     1280px;

  /* ----------------------------------------------------------
     TRANSISI & ANIMASI
     ---------------------------------------------------------- */

  --duration-fast:   120ms;  /* @kind other */
  --duration-base:   200ms;  /* @kind other */
  --duration-slow:   320ms;  /* @kind other */
  --duration-slower: 500ms;  /* @kind other */

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);      /* @kind other */
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);      /* @kind other */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  --transition-base:    all var(--duration-base) var(--ease-default); /* @kind other */
  --transition-colors:  color var(--duration-base) var(--ease-default),
                        background-color var(--duration-base) var(--ease-default),
                        border-color var(--duration-base) var(--ease-default); /* @kind other */
  --transition-transform: transform var(--duration-base) var(--ease-default); /* @kind other */

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */

  --z-below:   -1;  /* @kind other */
  --z-base:     0;  /* @kind other */
  --z-raised:  10;  /* @kind other */
  --z-dropdown:20;  /* @kind other */
  --z-sticky:  30;  /* @kind other */
  --z-overlay: 40;  /* @kind other */
  --z-modal:   50;  /* @kind other */
  --z-toast:   60;  /* @kind other */
  --z-tooltip: 70;  /* @kind other */
}