/* ============================================================
   GreenNode KB Authoring — Design Tokens (2027 palette)
   Single source of truth for color / space / radius / shadow / typography.
   Consumed by every screen and component sheet.

   Grounded in the GreenNode 2027 design system palette.
   Dark theme is the default (:root). Light theme = [data-theme="light"].
   Contract: see docs/DESIGN.md
   ============================================================ */

:root {
  /* ---- Typography ---- */
  /* System UI stack — Calibri first (brand, on Windows), then system fonts.
     All listed faces render Vietnamese diacritics correctly. */
  --font-sans: "Calibri", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  22px;
  --text-3xl:  28px;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.01em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.08em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-light:   300;

  /* ---- Spacing (4px base grid) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.20);
  --shadow-md: 0 2px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.45);

  /* ============================================================
     COLOR — Dark theme (default)
     Brand: navy #000928, teal-deep #0A4441, green #28D891 / #0DB14B
     ============================================================ */
  --color-bg:           #000928;
  --color-surface:      #071A2E;
  --color-surface-2:    #0A4441;
  --color-nav:          #03102A;

  --color-text:         #FFFFFF;
  --color-heading:      #FFFFFF;
  --color-muted:        #9FB0AE;
  --color-dim:          #6E8480;

  --color-border:       rgba(40,216,145,0.18);
  --color-border-soft:  rgba(255,255,255,0.07);

  --color-accent:       #28D891;
  --color-accent-strong:#0DB14B;
  --color-accent-tint:  rgba(40,216,145,0.14);
  --color-accent-text:  #28D891;
  --color-on-accent:    #000928;

  --color-row-hover:    rgba(40,216,145,0.06);
  --color-row-selected: rgba(40,216,145,0.12);

  --color-success:      #28D891;
  --color-warning:      #F5C453;
  --color-warning-tint: rgba(245,163,0,0.14);
  --color-warning-border: rgba(245,163,0,0.28);
  --color-danger:       #FF6B6B;
  --color-danger-tint:  rgba(255,107,107,0.14);
  --color-info:         #5BA7FF;
  --color-info-tint:    rgba(91,167,255,0.14);

  color-scheme: dark;
}

/* ============================================================
   COLOR — Light theme
   ============================================================ */
[data-theme="light"] {
  --color-bg:           #EFF3F6;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F3F4F6;
  --color-nav:          #FFFFFF;

  --color-text:         #0B3231;
  --color-heading:      #0A4441;
  --color-muted:        #44546A;
  --color-dim:          #ABABAB;

  --color-border:       #D0CECF;
  --color-border-soft:  #E4E8EB;

  --color-accent:       #0DB14B;
  --color-accent-strong:#178608;
  --color-accent-tint:  #D3EDD3;
  --color-accent-text:  #178608;
  --color-on-accent:    #FFFFFF;

  --color-row-hover:    rgba(13,177,75,0.05);
  --color-row-selected: rgba(13,177,75,0.10);

  --color-success:      #0DB14B;
  --color-warning:      #B45309;
  --color-warning-tint: #FBF1DC;
  --color-warning-border: #EAD9A8;
  --color-danger:       #C0392B;
  --color-danger-tint:  #FBEAE8;
  --color-info:         #0563C1;
  --color-info-tint:    #E5EFFB;

  --shadow-sm: 0 1px 2px rgba(15,20,19,0.06);
  --shadow-md: 0 2px 12px rgba(0,9,40,0.08);
  --shadow-lg: 0 18px 36px rgba(15,20,19,0.10);

  color-scheme: light;
}