/*
  Token desain Cycology Sec.
  Disalin dari sistem visual playerzero.ai (Tailwind v4 + shadcn):
  situs terang/editorial, kontainer bergaris, hairline 0.8px, aksen oranye.
*/

@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;
  src:url('../../fonts/geist/geist-sans-400.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;
  src:url('../../fonts/geist/geist-sans-500.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;
  src:url('../../fonts/geist/geist-sans-600.woff2') format('woff2');}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../../fonts/geist/geist-mono-400.woff2') format('woff2');}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../../fonts/geist/geist-mono-500.woff2') format('woff2');}

:root{
  /* --- permukaan --- */
  --bg:         #ffffff;
  --ink:        #1a1817;
  --ink-2:      #322f2d;
  --line:       #e7e5e4;
  --line-soft:  rgba(0,0,0,.06);
  --muted:      #79716b;
  --muted-2:    #f5f5f4;
  --dim:        #79716b;
  --tertiary:   #f0efeb;
  --tertiary-2: #f2ece7;

  /* --- aksen ---
     --acc dipakai untuk bidang dan penanda dekoratif, jadi boleh tetap
     seterang aslinya. Teks dan tombol butuh versi lebih gelap: #e65532
     hanya mencapai 3,67:1 di atas putih, di bawah ambang WCAG AA 4,5:1. */
  --acc:      #e65532;
  --acc-btn:  #c94a27;
  --acc-deep: #b8391b;
  --acc-soft: #f1a280;
  --acc-wash: #fdf1ec;

  /* --- tipografi --- */
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(32px, 4.4vw, 48px);
  --fs-h2:      clamp(26px, 3.1vw, 36px);
  --fs-h3:      17px;
  --fs-lead:    20px;
  --fs-body:    15px;
  --fs-small:   14px;
  --fs-label:   12px;

  --lh-display: 1;
  --lh-head:    1.11;
  --lh-body:    1.62;
  --lh-small:   1.43;

  --tr-display: -0.025em;
  --tr-head:    -0.025em;
  --tr-label:   0.12em;

  /* --- bentuk --- */
  --r-sm: 6px;
  --r:    8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --hair: 0.8px;

  /* --- ruang --- */
  --shell: 1280px;
  --pad-x: 32px;
  --sec-y: 96px;

  /* --- gerak ---
     Angka di bawah disalin dari CSS playerzero.ai supaya irama geraknya
     sama: permukaan mengambang masuk dalam 150ms dengan --ease-out,
     sedangkan perubahan yang lebih besar memakai --ease-expo. */
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-drop: 150ms;
  --ease: cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-expo: cubic-bezier(.22,1,.36,1);

  /* --- gerak nav (nuxaudio.id) ---
     Butir nav di sana punya dua lapis label: teks polos yang mengecil lalu
     hilang, dan pil gelap berisi teks putih yang naik dari bawah. Pil itu
     memakai kurva melambat tajam (.3,1,.3,1); butir di dalam panel masuk
     dengan geser dari kanan memakai kurva menyapu (.075,.82,.165,1). */
  --dur-dup: 500ms;
  --ease-dup: cubic-bezier(.3,1,.3,1);
  --dur-item: 700ms;
  --ease-item: cubic-bezier(.075,.82,.165,1);
}

@media (max-width:900px){
  :root{ --pad-x: 20px; --sec-y: 64px; --lh-display: 1.12; --fs-lead: 18px; }
}