/* ============================================================
   STOCKBIT DESIGN SYSTEM — CSS TOKENS
   Source: Figma "DS — Text Color Tokens"
   Font: DM Sans
   Modes: light (default) | dark ([data-theme="dark"])
   ============================================================

   HOW TO USE
   ----------
   1. Pick a token from below — never hardcode colors or font sizes.
   2. Use font: var(--text-*) for typography (1 variable = full text style).
   3. If no token fits, ask the designer before creating a new one.


   SURFACE COLOR MODEL
   -------------------
   Surface tokens follow a context + variant pattern:

     {context}              → the layer itself
     {context}-border       → border/divider on that layer
     {context}-emphasis     → element that stands out on that layer
     {context}-emphasis-low → subtle/secondary element on that layer

   Three contexts exist:

     artboard  → page canvas (outermost background)
     surface   → cards, panels, sidebar, header (sits on artboard)
     modal     → dialog, bottom sheet (floats above surface)
     popover   → tooltip, dropdown, context menu (floats above everything)

   Example stacking:

     ┌─ artboard ──────────────────────────────┐
     │                                          │
     │  ┌─ surface ─────────────────────────┐   │
     │  │  Card, panel, sidebar             │   │
     │  │                                   │   │
     │  │  ┌─ surface-emphasis ──────────┐  │   │
     │  │  │  Table header, avatar bg,   │  │   │
     │  │  │  input field bg             │  │   │
     │  │  └─────────────────────────────┘  │   │
     │  └───────────────────────────────────┘   │
     │                                          │
     │  ┌─ modal (overlay behind) ──────────┐   │
     │  │  Dialog content                   │   │
     │  │  ┌─ modal-emphasis ────────────┐  │   │
     │  │  │  Inner card, nested list    │  │   │
     │  │  └─────────────────────────────┘  │   │
     │  └───────────────────────────────────┘   │
     └──────────────────────────────────────────┘


   INTERACTION STATES
   ------------------
   Hover, active, and selected states use ACCENT tokens, not surface:

     :hover   → background: var(--accent-low)
     .active  → background: var(--accent-low)
     :focus   → border-color: var(--accent)

   Surface-emphasis is for STATIC elements that always stand out.
   Accent is for INTERACTIVE states triggered by user action.


   TEXT STYLE MODEL
   ----------------
   Each text token is a font shorthand: weight size/line-height family.
   Usage: font: var(--text-body-1r);

     Billboard  (24px 700)  → feature intro modal, onboarding
     Display    (20/16px 700) → large numeric values (portfolio, price)
     Title      (20/16px 700) → page title, 1 per page
     Heading    (16/13px 700) → section/card title, multiple per page
     Body       (14/13/12px)  → general UI content (B=bold, R=regular)
     Label      (12px 400)    → meta text, timestamps, chips
     Micro      (11px 400)    → smallest text (streak dots, arrows)
     Paragraph  (15/14/13px)  → long-form reading (145% line-height)
     Table      (14/13/12px)  → same as Body, but inside <table> only
                                (separated for independent scaling)

   ============================================================ */

/* ── LIGHT MODE (default) ─────────────────────────────────── */
:root {

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:   2px;    /* checkbox, small elements */
  --radius:      4px;    /* default — buttons, badges, inputs, cards */
  --radius-md:   6px;    /* nav items, medium elements */
  --radius-lg:   12px;   /* toggle tracks, large rounding */
  --radius-full: 50%;    /* circles — avatars, dots */


  /* ══ TEXT COLORS ══════════════════════════════════════════ */

  /* Neutral — text hierarchy from most to least prominent */
  --text-primary:        #333333;   /* headings, body text, task titles */
  --text-secondary:      #737373;   /* labels, subtitles, card titles secondary */
  --text-tertiary:       #949494;   /* hints, timestamps, meta text */
  --text-placeholder:    #BBBBBB;   /* input placeholder, empty state */
  --text-disabled:       #C4C4C4;   /* disabled controls */
  --text-icon:           #A6A6A6;   /* default icon color */

  /* Semantic — financial */
  --text-positive:       #00AB6B;   /* price up, gain, +return */
  --text-negative:       #EE4A49;   /* price down, loss, -return */

  /* Semantic — system */
  --text-success:        #00AB6B;   /* form valid, verified, toast success */
  --text-error:          #DB5857;   /* form error, validation failed */
  --text-caution:        #F5A23D;   /* warning text */
  --text-info:           #6D92C5;   /* informational text */
  --text-special:        #9966CC;   /* premium badge text */

  /* Brand */
  --text-brand:          #00AB6B;   /* CTA link, active tab text */

  /* On-surface — text on colored backgrounds */
  --text-on-color:       #FFFFFF;   /* text on accent/brand/semantic bg */
  --text-inverse:        #F5F5F5;   /* text on dark surface */


  /* ══ SURFACE COLORS ══════════════════════════════════════ */

  /* Brand — solid brand colors for buttons and icons */
  --brand-green:         #00AB6B;   /* primary button, brand icon */
  --brand-red:           #EE4A49;   /* destructive button */

  /* Hierarchy — page layering from back to front */
  --artboard:            #E5E5E5;   /* paling dasar — canvas / layar utama */
  --surface:             #FFFFFF;   /* layer pertama di atas artboard */
  --surface-border:      #E8E8E8;   /* border / divider di atas surface */
  --surface-emphasis:    #F5F5F5;   /* elevasi di atas surface — card, list item */
  --surface-emphasis-low:#F2F2F2;   /* elevasi lebih rendah — subtle bg, hover */

  /* Elevated */
  --modal:               #FFFFFF;   /* background modal / dialog / bottom sheet */
  --modal-border:        #E8E8E8;   /* border / divider di dalam modal */
  --modal-emphasis:      #F5F5F5;   /* elevasi di dalam modal — inner card, list */
  --modal-emphasis-low:  #FAFAFA;   /* subtle bg di dalam modal */
  --popover:             #FFFFFF;   /* background tooltip, dropdown, context menu */
  --popover-border:      #E8E8E8;   /* border / outline tooltip, dropdown, context menu */
  --overlay:             rgba(0, 0, 0, 0.40);  /* scrim gelap di belakang modal / bottom sheet */

  /* Semantic */
  --surface-success:     #E0F5EC;   /* toast sukses, form valid state bg */
  --surface-error:       #FDECEA;   /* toast error, form error state bg */
  --surface-caution:     #FEF6E0;   /* toast warning, alert banner bg */
  --surface-info:        #E8F2FB;   /* informational banner bg */
  --surface-special:     #DFCBEF;   /* premium badge, highlight fitur eksklusif */

  /* State */
  --surface-skeleton:    #EBEBEB;   /* loading shimmer / placeholder state */
  --disabled:            #F0F0F0;   /* background elemen non-interaktif */

  /* ── Typography — Font shorthand: weight size/line-height family ── */
  /* Set --font-family per project. All text styles reference it. */
  --font-family:         'DM Sans', sans-serif;

  /* Billboard */
  --text-billboard-1:    700 24px/1.25 var(--font-family);

  /* Display */
  --text-display-1:      700 20px/1.25 var(--font-family);
  --text-display-2:      700 16px/1.25 var(--font-family);

  /* Title */
  --text-title-1:        700 20px/1.30 var(--font-family);
  --text-title-2:        700 16px/1.30 var(--font-family);

  /* Heading */
  --text-heading-1:      700 16px/1.30 var(--font-family);
  --text-heading-2:      700 13px/1.30 var(--font-family);

  /* Body — Bold */
  --text-body-1b:        700 14px/1.30 var(--font-family);
  --text-body-2b:        700 13px/1.30 var(--font-family);
  --text-body-3b:        700 12px/1.30 var(--font-family);

  /* Body — Regular */
  --text-body-1r:        400 14px/1.30 var(--font-family);
  --text-body-2r:        400 13px/1.30 var(--font-family);
  --text-body-3r:        400 12px/1.30 var(--font-family);

  /* Label */
  --text-label-1:        400 12px/1.30 var(--font-family);

  /* Micro */
  --text-micro-1:        400 11px/1.30 var(--font-family);

  /* Paragraph */
  --text-paragraph-1:    400 15px/1.45 var(--font-family);
  --text-paragraph-2:    400 14px/1.45 var(--font-family);
  --text-paragraph-3:    400 13px/1.45 var(--font-family);

  /* Table — Bold */
  --text-table-1b:       700 14px/1.30 var(--font-family);
  --text-table-2b:       700 13px/1.30 var(--font-family);
  --text-table-3b:       700 12px/1.30 var(--font-family);

  /* Table — Regular */
  --text-table-1r:       400 14px/1.30 var(--font-family);
  --text-table-2r:       400 13px/1.30 var(--font-family);
  --text-table-3r:       400 12px/1.30 var(--font-family);
}


/* ── DARK MODE ─────────────────────────────────────────────── */
.dark,
[data-theme="dark"] {

  /* ── Text Colors / Neutral ─────────────────────────────── */
  --text-primary:        #CBCBCB;
  --text-secondary:      #8C8C8C;
  --text-tertiary:       #6B6B6B;
  --text-placeholder:    #4A4A4A;
  --text-disabled:       #3D3D3D;
  --text-icon:           #595959;

  /* ── Text Colors / Semantic ────────────────────────────── */
  --text-positive:       #0BA16B;
  --text-negative:       #D74342;
  --text-success:        #0BA16B;
  --text-error:          #DB5857;
  --text-caution:        #F5A23D;
  --text-info:           #6D92C5;
  --text-special:        #9966CC;

  /* ── Text Colors / Brand ───────────────────────────────── */
  --text-brand:          #00AB6B;

  /* ── Text Colors / On-surface ──────────────────────────── */
  --text-on-color:       #FFFFFF;
  --text-inverse:        #1A1A1A;

  /* ── Surface Colors / Brand ────────────────────────────── */
  --brand-green:         #00AB6B;
  --brand-red:           #EE4A49;

  /* ── Surface Colors / Surface hierarchy ────────────────── */
  --artboard:    #121212;
  --surface:        #1F1F1F;
  --surface-border:      #303030;
  --surface-emphasis:    #2B2B2B;
  --surface-emphasis-low:#262626;

  /* ── Elevated ─────────────────────────────────────────── */
  --modal:               #2E2E2E;
  --modal-border:        #404040;
  --modal-emphasis:      #363636;
  --modal-emphasis-low:  #262626;
  --popover:             #363636;
  --popover-border:      #454545;
  --overlay:             rgba(0, 0, 0, 0.50);

  /* ── Semantic ─────────────────────────────────────────── */
  --surface-success:     #0D3D28;
  --surface-error:       #3D1414;
  --surface-caution:     #3D2800;
  --surface-info:        #112033;
  --surface-special:     #4B3461;

  /* ── Surface Colors / State ────────────────────────────── */
  --surface-skeleton:    #2A2A2A;
  --disabled:    #2A2A2A;
}


/* ============================================================
   UTILITY CLASSES — Typography
   Usage: <p class="text-body-1r"> or font: var(--text-heading-1);
   ============================================================ */

.text-billboard-1 { font: var(--text-billboard-1); }
.text-display-1   { font: var(--text-display-1); }
.text-display-2   { font: var(--text-display-2); }
.text-title-1     { font: var(--text-title-1); }
.text-title-2     { font: var(--text-title-2); }
.text-heading-1   { font: var(--text-heading-1); }
.text-heading-2   { font: var(--text-heading-2); }
.text-body-1b     { font: var(--text-body-1b); }
.text-body-2b     { font: var(--text-body-2b); }
.text-body-3b     { font: var(--text-body-3b); }
.text-body-1r     { font: var(--text-body-1r); }
.text-body-2r     { font: var(--text-body-2r); }
.text-body-3r     { font: var(--text-body-3r); }
.text-label-1     { font: var(--text-label-1); }
.text-micro-1     { font: var(--text-micro-1); }
.text-paragraph-1 { font: var(--text-paragraph-1); }
.text-paragraph-2 { font: var(--text-paragraph-2); }
.text-paragraph-3 { font: var(--text-paragraph-3); }
.text-table-1b    { font: var(--text-table-1b); }
.text-table-2b    { font: var(--text-table-2b); }
.text-table-3b    { font: var(--text-table-3b); }
.text-table-1r    { font: var(--text-table-1r); }
.text-table-2r    { font: var(--text-table-2r); }
.text-table-3r    { font: var(--text-table-3r); }