/* sto-admin-design/css/tokens.css
   Single source of truth. Dark is the only theme — there is no light mode.
   To re-brand: change the amber scale + --accent-* aliases here. Nothing else. */

:root {
  /* ---- Brand: amber scale ---------------------------------------------- */
  --amber-50:  #fbf3e7;
  --amber-100: #f3e0c2;
  --amber-200: #e8c592;
  --amber-300: #dba95f;   /* text / link accent on dark — AA on all surfaces */
  --amber-400: #cb8f36;
  --amber-500: #b87020;   /* base — primary button fill, white ink */
  --amber-600: #9a5d1a;
  --amber-700: #6f4213;
  --amber-900: #3d240a;

  --accent:        var(--amber-500);
  --accent-hover:  var(--amber-400);
  --accent-active: var(--amber-600);
  --accent-text:   var(--amber-300);
  --accent-text-hi:var(--amber-200);
  --accent-on:     #ffffff;

  /* ---- Surfaces & rules ------------------------------------------------ */
  --bg:             #131110;
  --surface:        #1b1917;
  --surface-raised: #23201d;
  --surface-sunken: #0f0d0c;
  --surface-hover:  #262320;
  --overlay:        rgba(10, 9, 8, .74);
  --paper:          #f6f4f0;   /* the lit writing surface */
  --paper-rule:     #ddd8cf;
  --rule:           #302c28;
  --rule-strong:    #423d37;

  /* ---- Text ------------------------------------------------------------ */
  --text:         #f2efe9;   /* 14.9:1 on --surface */
  --text-2:       #b8b2aa;   /*  8.1:1 */
  --text-3:       #8a847c;   /*  4.6:1 — smallest allowed for text */
  --text-inverse: #131110;   /* ink on --paper */
  --text-inverse-2:#4a453f;
  --focus-ring:   var(--amber-300);

  /* ---- Semantic -------------------------------------------------------- */
  --success-fg: #6fc08c; --success-bg: #16281d; --success-bd: #2c4a36;
  --warning-fg: #e2b45c; --warning-bg: #2a2113; --warning-bd: #4d3c1c;
  --danger-fg:  #f08a6c; --danger-bg:  #2c1713; --danger-bd:  #55271f;
  --info-fg:    #7ab6e8; --info-bg:    #12222e; --info-bd:    #24445e;
  --neutral-fg: #b8b2aa; --neutral-bg: #262320; --neutral-bd: var(--rule-strong);

  /* ---- Status map: [data-status] resolves to these --------------------- */
  --st-draft-fg:       var(--neutral-fg); --st-draft-bg:       var(--neutral-bg); --st-draft-bd:       var(--neutral-bd);
  --st-offline-fg:     var(--text-2);     --st-offline-bg:     #2e2a26;           --st-offline-bd:     #4b453e;
  --st-scheduled-fg:   var(--info-fg);    --st-scheduled-bg:   var(--info-bg);    --st-scheduled-bd:   var(--info-bd);
  --st-online-fg:      var(--success-fg); --st-online-bg:      var(--success-bg); --st-online-bd:      var(--success-bd);
  --st-new-fg:         var(--info-fg);    --st-new-bg:         var(--info-bg);    --st-new-bd:         var(--info-bd);
  --st-approved-fg:    var(--success-fg); --st-approved-bg:    var(--success-bg); --st-approved-bd:    var(--success-bd);
  --st-notApproved-fg: var(--danger-fg);  --st-notApproved-bg: var(--danger-bg);  --st-notApproved-bd: var(--danger-bd);
  --st-active-fg:      var(--success-fg); --st-active-bg:      var(--success-bg); --st-active-bd:      var(--success-bd);
  --st-inactive-fg:    var(--neutral-fg); --st-inactive-bg:    var(--neutral-bg); --st-inactive-bd:    var(--neutral-bd);
  --st-blocked-fg:     var(--danger-fg);  --st-blocked-bg:     var(--danger-bg);  --st-blocked-bd:     var(--danger-bd);

  /* ---- Type ------------------------------------------------------------ */
  --font-ui:      'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-content: 'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-3xl: 33px; --fs-2xl: 26px; --fs-xl: 21px; --fs-lg: 17px;
  --fs-md: 15px;  --fs-base: 13.5px; --fs-sm: 12.5px; --fs-xs: 11px;

  --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.5; --lh-loose: 1.65;
  --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700;
  --ls-kicker: .16em;

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

  /* ---- Radii & shadow -------------------------------------------------- */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 12px -4px rgba(0,0,0,.6);
  --sh-3: 0 18px 44px -16px rgba(0,0,0,.8);

  /* ---- Containers ------------------------------------------------------ */
  --w-content: 1180px;
  --w-editor: 760px;
  --w-rail: 320px;
  --w-sidebar: 224px;
  --w-sidebar-collapsed: 60px;
  --h-topbar: 52px;
  --h-actionbar: 56px;
  --h-control: 32px;
  --h-control-lg: 38px;

  /* ---- Z-index --------------------------------------------------------- */
  --z-base: 0; --z-sticky: 100; --z-drawer: 200;
  --z-overlay: 300; --z-modal: 400; --z-toast: 500;

  /* ---- Motion ---------------------------------------------------------- */
  --dur-1: 90ms; --dur-2: 160ms; --dur-3: 260ms; --dur-4: 380ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}