/* ============================================================================
   VIRCANSASTUDIO Design System v2.0 — TOKENS (konsolidasi satu file)
   ----------------------------------------------------------------------------
   Sumber : 12.04 Design System/12.04.00 Base Design System/
            VIRCANSASTUDIO Design System.html  (di-unpack dari bundle;
            blok token diverifikasi identik 152/152 variabel dengan
            12.04.00 .../tokens/*.css kanonik — nol drift, 2026-07-19)
   Aturan : nilai TIDAK diperkirakan; semua disalin apa adanya dari source.
            Nilai yang muncul berulang di source dijadikan alias var(--…)
            — daftar lengkap di bagian "Catatan dedup" paling bawah.
   Fonts  : @font-face TIDAK di sini. File font self-hosted ada di
            12.04.00 Base Design System/fonts/ (Fivo Sans Modern OTF) dan
            deklarasinya di 12.04.00 .../tokens/fonts.css. Token di file ini
            hanya membawa family stack.
   Breakpoint: source TIDAK mendefinisikan @media breakpoint sama sekali —
            hanya lebar kontainer (--container-*). Jangan mengarang breakpoint.
   ============================================================================ */

:root {
  /* ===== Brand core ===== */
  --vs-black: #050505;          /* primary CTA / ink */
  --vs-white: #FFFFFF;
  --vs-yellow: #FFF700;         /* Identity Yellow */
  --vs-yellow-soft: #FFFDE6;    /* pale yellow surface */
  --vs-yellow-shadow: #E6DC00;  /* yellow line / shadow */

  /* ===== Neutral ink scale (spec) =====
     Catatan: --ink-900 = --vs-black (#050505). Source mendefinisikan keduanya
     sebagai dua keluarga dasar (brand core vs ink scale); dipertahankan. */
  --ink-900: #050505;
  --ink-800: #111214;
  --ink-600: #3A3D45;
  --ink-400: #777D88;
  --ink-300: #9AA0AA;
  /* extended for fills / disabled */
  --ink-200: #C3C7CF;
  --ink-100: #E6E8EE;
  --ink-050: #F2F4F7;

  /* ===== Surfaces & lines ===== */
  --surface-0: var(--vs-white);     /* card / sheet — #FFFFFF (dedup) */
  --surface-1: #F7F8FA;             /* subtle raised / input fill */
  --canvas:    #E7E9EF;             /* app canvas behind cards */
  --line-200:  var(--ink-100);      /* default hairline — #E6E8EE (dedup) */
  --line-100:  #F0F2F5;             /* faint divider */

  /* ===== Operational accents ===== */
  --accent-cyan:   #16C7E8;
  --accent-blue:   #2F63B7;
  --accent-red:    #F5365E;
  --accent-mint:   #047857;
  --accent-lime:   #84CC16;
  --accent-orange: #F97316;
  --accent-pink:   #EC4899;
  --accent-violet: #6848B3;

  /* ===== Semantic aliases — "Opsi A" bridge ===== */
  --primary:          var(--vs-black);   /* primary action surface */
  --primary-hover:    #1B1C1F;
  --primary-active:   #000000;
  --primary-contrast: var(--vs-white);
  --brand:            var(--vs-yellow);  /* identity accent */
  --brand-soft:       var(--vs-yellow-soft);
  --brand-line:       var(--vs-yellow-shadow);
  --brand-ink:        var(--vs-black);   /* text/icon sitting on yellow */

  /* text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-600);
  --text-subtle:   var(--ink-400);
  --text-disabled: var(--ink-300);
  --text-on-dark:  var(--vs-white);      /* #FFFFFF (dedup) */
  --text-on-dark-muted: rgba(255,255,255,0.64);

  /* backgrounds */
  --bg-app:    var(--canvas);
  --bg-card:   var(--surface-0);
  --bg-subtle: var(--surface-1);
  --bg-inset:  var(--ink-050);
  --bg-ink:    var(--ink-900);

  /* borders */
  --border-default: var(--line-200);
  --border-faint:   var(--line-100);
  --border-strong:  var(--ink-900);
  --border-input:   #DDE1E8;

  /* focus */
  --focus-ring:       rgba(5,5,5,0.14);
  --focus-ring-brand: rgba(230,220,0,0.55);
}

/* ===== Typography ===================================================
   Headings: Fivo Sans Modern (self-hosted; Space Grotesk fallback)
   Body: Geist · Mono: Geist Mono.
   Mono micro-labels (uppercase + letter-spacing) act as editorial kickers. */
:root {
  /* families */
  --font-display: "Fivo Sans Modern", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* type scale */
  --text-display-xl: 72px;
  --text-display-lg: 56px;
  --text-display: 44px;
  --text-h1: 36px;
  --text-h2: 28px;
  --text-h3: 22px;
  --text-h4: 18px;
  --text-lg: 18px;   /* sengaja sama dengan --text-h4 (alias semantik di source) */
  --text-md: 16px;   /* base body */
  --text-sm: 14px;
  --text-xs: 13px;   /* catatan: 13px, bukan 12px — sesuai source */
  --text-2xs: 11px;  /* micro-label */

  /* line heights */
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-normal: 1.5;
  --lh-relaxed: 1.62;

  /* letter spacing */
  --ls-display: -0.02em;
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-label: 0.14em;     /* mono kicker */
  --ls-label-sm: 0.10em;
}

/* ===== Spacing & layout — 4px base rhythm, generous whitespace ===== */
:root {
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;

  /* layout */
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --gutter: 24px;
  --field-h: 44px;      /* min hit target */
  --field-h-sm: 36px;
  --field-h-lg: 52px;
}

/* ===== Corner radii — boxy, restrained; pill reserved for tags/avatars ===== */
:root {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 100px;
}

/* ===== Elevation — soft, layered, low-contrast; identity glow for accents ===== */
:root {
  --shadow-xs: 0 1px 2px rgba(5,5,5,0.05);
  --shadow-card: 0 1px 2px rgba(5,5,5,0.04), 0 6px 20px rgba(5,5,5,0.06);
  --shadow-pop: 0 16px 40px rgba(5,5,5,0.14), 0 4px 12px rgba(5,5,5,0.08);
  --shadow-identity: 0 8px 28px rgba(230,220,0,0.40);
  --shadow-focus: 0 0 0 3px var(--focus-ring);
  --shadow-focus-brand: 0 0 0 3px var(--focus-ring-brand);
}

/* ===== Per-brand skins (one system, three brands) ==================
   Default scope = VIRCANSASTUDIO. Apply data-brand="luxa" | "nussa" on any
   container to re-skin --brand-accent / --brand-gradient beneath it.
   Nilai di blok skin sengaja literal (self-contained per brand) — sesuai source. */
:root,
[data-brand="vircansa"] {
  --brand-accent: #FFF700;
  --brand-accent-ink: #050505;                 /* readable text on accent */
  --brand-gradient: linear-gradient(135deg, #050505 0%, #15140A 52%, #4D4700 82%, #FFF700 108%);
  --brand-gradient-soft: linear-gradient(135deg, #FFFDE6 0%, #FFFFFF 100%);
  --brand-label: "VIRCANSASTUDIO";
}
[data-brand="luxa"] {
  --brand-accent: #3A3A3A;
  --brand-accent-ink: #FFFFFF;
  --brand-gradient: linear-gradient(135deg, #111214 0%, #3A3A3A 56%, #EDEAE3 116%);
  --brand-gradient-soft: linear-gradient(135deg, #F3F1EC 0%, #FFFFFF 100%);
  --brand-label: "LUXA Photo & Films";
}
[data-brand="nussa"] {
  --brand-accent: #F2541B;
  --brand-accent-ink: #FFFFFF;
  --brand-gradient: linear-gradient(120deg, #F2541B 0%, #FF7A3C 52%, #FFC79E 100%);
  --brand-gradient-soft: linear-gradient(135deg, #FFF0E8 0%, #FFFFFF 100%);
  --brand-label: "NUSSA Collective";
}

/* ===== Fresh Tag System =============================================
   Pastel status tags, each as a bg / border / text triad. Text on bg meets
   WCAG AA. Tags: success, mint, info, blue, purple, pink, warning, orange,
   danger, neutral, identity. */
:root {
  --tag-success-bg:#ECFDF3; --tag-success-border:#A6F0C6; --tag-success-text:#067647;
  --tag-mint-bg:#EFFBF6;    --tag-mint-border:#A7EFD3;    --tag-mint-text:var(--accent-mint);      /* #047857 (dedup) */
  --tag-info-bg:#ECFDFF;    --tag-info-border:#A5EEF8;    --tag-info-text:#0C7186;
  --tag-blue-bg:#EEF4FF;    --tag-blue-border:#BACCF4;    --tag-blue-text:var(--accent-blue);      /* #2F63B7 (dedup) */
  --tag-purple-bg:#F4F1FE;  --tag-purple-border:#D6C9F5;  --tag-purple-text:#5B3C9E;
  --tag-pink-bg:#FDF2FA;    --tag-pink-border:#F9CFEA;    --tag-pink-text:#C11574;
  --tag-warning-bg:#FFFAEB; --tag-warning-border:#FDDF89; --tag-warning-text:#B54708;
  --tag-orange-bg:#FFF4ED;  --tag-orange-border:#FCD7B0;  --tag-orange-text:#C2470E;
  --tag-danger-bg:#FEF3F2;  --tag-danger-border:#FDCBC8;  --tag-danger-text:#CB1A39;
  --tag-neutral-bg:var(--surface-1);        /* #F7F8FA (dedup) */
  --tag-neutral-border:#E1E4EA;
  --tag-neutral-text:var(--ink-600);        /* #3A3D45 (dedup) */
  --tag-identity-bg:var(--vs-yellow-soft);       /* #FFFDE6 (dedup) */
  --tag-identity-border:var(--vs-yellow-shadow); /* #E6DC00 (dedup) */
  --tag-identity-text:#4A4500;
}

/* ============================================================================
   Catatan dedup — nilai berulang di source yang di sini dijadikan alias
   (nilai komputasi tidak berubah sedikit pun):
     --surface-0            #FFFFFF → var(--vs-white)
     --text-on-dark         #FFFFFF → var(--vs-white)
     --line-200             #E6E8EE → var(--ink-100)
     --tag-mint-text        #047857 → var(--accent-mint)
     --tag-blue-text        #2F63B7 → var(--accent-blue)
     --tag-neutral-bg       #F7F8FA → var(--surface-1)
     --tag-neutral-text     #3A3D45 → var(--ink-600)
     --tag-identity-bg      #FFFDE6 → var(--vs-yellow-soft)
     --tag-identity-border  #E6DC00 → var(--vs-yellow-shadow)
   Duplikat yang SENGAJA dibiarkan literal (dua keluarga dasar / blok skin
   self-contained): --ink-900 = --vs-black (#050505); nilai di blok
   [data-brand=…]; --text-h4 = --text-lg (18px, alias semantik).
   ============================================================================ */