/* ==========================================================================
   Stay Booked Automation — design tokens
   Light is defined on bare :root. Dark is redefined twice: once for the
   OS setting (guarded so an explicit light stamp wins) and once for the
   in-app toggle. No component may declare a color outside this file.
   Chart surfaces and the categorical/status/ordinal ramps are the
   validated data-viz reference values — do not re-step them casually.
   ========================================================================== */

:root {
  color-scheme: light;

  /* -- planes & ink ------------------------------------------------------ */
  --plane:            #ebedf0;  /* page ground: cool graphite paper        */
  --plane-sunken:     #e2e5ea;  /* wells, board gutters                    */
  --surface:          #fcfcfb;  /* panel + chart surface (validated)       */
  --surface-raised:   #ffffff;  /* menus, drawers, modals                  */
  --surface-hover:    #f2f2ef;
  --surface-active:   #ececeb;

  --ink:              #0b0b0b;
  --ink-secondary:    #52514e;
  --ink-muted:        #898781;
  --ink-inverse:      #fcfcfb;

  --rule:             #dcdcd6;  /* hairline between rows / sections        */
  --rule-strong:      #c3c2b7;  /* axis, table header underline            */
  --grid:             #e1e0d9;  /* chart gridline                          */
  --ring:             rgba(11, 11, 11, 0.10);

  /* -- brand / interface accent (chrome, not data) ----------------------- */
  --accent:           #0f4c81;
  --accent-hover:     #0c3d68;
  --accent-soft:      #dfeaf5;
  --accent-ink:       #ffffff;
  --focus:            #0f4c81;

  /* -- status (reserved: never used for a data series) ------------------- */
  --good:             #0ca30c;
  --good-soft:        #e0f3e0;
  --good-text:        #006300;
  --warning:          #fab219;
  --warning-soft:     #fdf0d5;
  --warning-text:     #7a5200;
  --serious:          #ec835a;
  --serious-soft:     #fceae1;
  --critical:         #d03b3b;
  --critical-soft:    #f8e2e2;
  --critical-text:    #a32424;

  /* -- pipeline stages: ordinal blue ramp, light -> dark = early -> late -- */
  --stage-new:        #86b6ef;
  --stage-contacted:  #5598e7;
  --stage-discovery:  #2a78d6;
  --stage-proposal:   #1c5cab;
  --stage-negotiation:#104281;
  --stage-won:        #0ca30c;
  --stage-lost:       #d03b3b;

  /* -- categorical series (validated order — assign in slot order) ------- */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  /* -- sequential blue ramp (magnitude, single hue) ---------------------- */
  --seq-100: #cde2fb;
  --seq-250: #86b6ef;
  --seq-400: #3987e5;
  --seq-450: #2a78d6;
  --seq-550: #1c5cab;
  --seq-650: #104281;

  /* -- elevation --------------------------------------------------------- */
  --shadow-pop:  0 1px 2px rgba(11,11,11,.08), 0 8px 24px rgba(11,11,11,.12);
  --shadow-drag: 0 2px 4px rgba(11,11,11,.10), 0 16px 32px rgba(11,11,11,.18);

  /* -- type -------------------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui:      "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-micro:  0.6875rem;  /* 11px — uppercase labels                       */
  --t-small:  0.75rem;    /* 12px — meta, table secondary                  */
  --t-body:   0.8125rem;  /* 13px — dense UI body                          */
  --t-base:   0.875rem;   /* 14px — default                                */
  --t-lead:   1rem;       /* 16px                                          */
  --t-h3:     1.125rem;
  --t-h2:     1.375rem;
  --t-h1:     1.75rem;
  --t-figure: 2rem;       /* stat tile value                               */

  /* -- geometry ---------------------------------------------------------- */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 5px;
  --rail: 3px;            /* the stage stripe                              */
  --bar-cap: 4px;         /* rounded data-end on bars                      */

  --gutter: 20px;
  --shell-max: 1560px;
  --topbar-h: 58px;
  --tabrail-h: 42px;
}

/* Dark — OS setting. Guard lets an explicit light choice beat a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --plane:          #0c0e11;
    --plane-sunken:   #08090b;
    --surface:        #1a1a19;
    --surface-raised: #21211f;
    --surface-hover:  #232322;
    --surface-active: #2b2b29;

    --ink:            #ffffff;
    --ink-secondary:  #c3c2b7;
    --ink-muted:      #898781;
    --ink-inverse:    #0b0b0b;

    --rule:           #2f2f2c;
    --rule-strong:    #383835;
    --grid:           #2c2c2a;
    --ring:           rgba(255, 255, 255, 0.10);

    --accent:         #5a9bd8;
    --accent-hover:   #79b1e4;
    --accent-soft:    #14293c;
    --accent-ink:     #08131d;
    --focus:          #79b1e4;

    --good-soft:      #10240f;
    --good-text:      #0ca30c;
    --warning-soft:   #2a2008;
    --warning-text:   #fab219;
    --serious-soft:   #2d1a12;
    --critical-soft:  #2c1414;
    --critical-text:  #e46a6a;

    --stage-new:        #184f95;
    --stage-contacted:  #256abf;
    --stage-discovery:  #3987e5;
    --stage-proposal:   #6da7ec;
    --stage-negotiation:#9ec5f4;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;

    --seq-100: #0d366b;
    --seq-250: #184f95;
    --seq-400: #256abf;
    --seq-450: #3987e5;
    --seq-550: #6da7ec;
    --seq-650: #9ec5f4;

    --shadow-pop:  0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.55);
    --shadow-drag: 0 2px 4px rgba(0,0,0,.5), 0 16px 32px rgba(0,0,0,.65);
  }
}

/* Dark — in-app toggle. Must win over a light OS, so it repeats the set. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --plane:          #0c0e11;
  --plane-sunken:   #08090b;
  --surface:        #1a1a19;
  --surface-raised: #21211f;
  --surface-hover:  #232322;
  --surface-active: #2b2b29;

  --ink:            #ffffff;
  --ink-secondary:  #c3c2b7;
  --ink-muted:      #898781;
  --ink-inverse:    #0b0b0b;

  --rule:           #2f2f2c;
  --rule-strong:    #383835;
  --grid:           #2c2c2a;
  --ring:           rgba(255, 255, 255, 0.10);

  --accent:         #5a9bd8;
  --accent-hover:   #79b1e4;
  --accent-soft:    #14293c;
  --accent-ink:     #08131d;
  --focus:          #79b1e4;

  --good-soft:      #10240f;
  --good-text:      #0ca30c;
  --warning-soft:   #2a2008;
  --warning-text:   #fab219;
  --serious-soft:   #2d1a12;
  --critical-soft:  #2c1414;
  --critical-text:  #e46a6a;

  --stage-new:        #184f95;
  --stage-contacted:  #256abf;
  --stage-discovery:  #3987e5;
  --stage-proposal:   #6da7ec;
  --stage-negotiation:#9ec5f4;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;

  --seq-100: #0d366b;
  --seq-250: #184f95;
  --seq-400: #256abf;
  --seq-450: #3987e5;
  --seq-550: #6da7ec;
  --seq-650: #9ec5f4;

  --shadow-pop:  0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.55);
  --shadow-drag: 0 2px 4px rgba(0,0,0,.5), 0 16px 32px rgba(0,0,0,.65);
}