/* =========================================================================
   TOKENS.CSS — design tokens
   Single source of truth for colour, type, spacing, radius and elevation.
   Loaded first (after Bootstrap, before every other project stylesheet).
   Themes follow Bootstrap's own switch: <html data-bs-theme="light|dark">.
   ========================================================================= */

/* 1. Theme-independent scale */
:root {
  --rb-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rb-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --rb-fs-xs:   12px;
  --rb-fs-sm:   13px;
  --rb-fs-base: 14px;
  --rb-fs-md:   16px;
  --rb-fs-lg:   18px;
  --rb-fs-xl:   20px;
  --rb-fs-2xl:  24px;
  --rb-fs-3xl:  30px;

  --rb-lh: 1.5;
  --rb-lh-tight: 1.25;

  --rb-fw-regular:  400;
  --rb-fw-medium:   500;
  --rb-fw-semibold: 600;
  --rb-fw-bold:     700;

  /* Spacing (4 / 8 / 12 / 16 / 24 / 32 / 48) */
  --rb-space-1: 4px;
  --rb-space-2: 8px;
  --rb-space-3: 12px;
  --rb-space-4: 16px;
  --rb-space-5: 24px;
  --rb-space-6: 32px;
  --rb-space-7: 48px;

  /* Radius */
  --rb-radius-sm: 4px;   /* badges, chips, inline code */
  --rb-radius:    6px;   /* inputs, buttons */
  --rb-radius-lg: 8px;   /* cards, modals */
  --rb-radius-pill: 999px;

  /* Control sizes */
  --rb-control-h:    36px;
  --rb-control-h-sm: 30px;
  --rb-btn-h:        34px;
  --rb-navbar-h:     56px;

  /* Motion */
  --rb-ease: cubic-bezier(.2, 0, 0, 1);
  --rb-dur:  .15s;

  /* Layout */
  --rb-container-max: 1440px;
}

/* 2. Light theme (default) */
:root,
[data-bs-theme="light"] {
  color-scheme: light;

  /* Brand — teal / petroleum green */
  --rb-primary:             #0E6B6B;
  --rb-primary-rgb:         14, 107, 107;
  --rb-primary-hover:       #0A5757;
  --rb-primary-active:      #084848;
  --rb-primary-subtle:      #E6F2F1;
  --rb-primary-subtle-text: #0A5757;
  --rb-primary-border:      #B5D8D5;
  --rb-on-primary:          #FFFFFF;
  --rb-focus-ring:          rgba(14, 107, 107, .35);

  /* Neutrals */
  --rb-bg:            #F6F7F8;
  --rb-bg-rgb:        246, 247, 248;
  --rb-surface:       #FFFFFF;
  --rb-surface-rgb:   255, 255, 255;
  --rb-surface-2:     #F1F3F5;
  --rb-surface-2-rgb: 241, 243, 245;
  --rb-surface-3:     #E9ECEF;
  --rb-border:        #E2E6E9;
  --rb-border-strong: #CDD3D8;
  --rb-text:          #1A2328;
  --rb-text-rgb:      26, 35, 40;
  --rb-text-muted:    #5B6870;
  --rb-text-muted-rgb: 91, 104, 112;
  --rb-text-subtle:   #8A969D;

  /* Neutral "status" (archived, obsolete, generic labels) */
  --rb-neutral:        #5B6870;
  --rb-neutral-subtle: #EDF0F2;
  --rb-neutral-text:   #3E4A51;
  --rb-neutral-border: #D7DDE1;

  /* Status — solid / subtle background / subtle text / border */
  --rb-success:        #1F7A4D;
  --rb-success-rgb:    31, 122, 77;
  --rb-success-subtle: #E7F4EC;
  --rb-success-text:   #1A6B43;
  --rb-success-border: #BFE0CC;

  --rb-warning:        #A16207;
  --rb-warning-rgb:    161, 98, 7;
  --rb-warning-subtle: #FBF1DE;
  --rb-warning-text:   #8A5306;
  --rb-warning-border: #EED7A8;

  --rb-danger:         #B42318;
  --rb-danger-rgb:     180, 35, 24;
  --rb-danger-hover:   #9B1C13;
  --rb-danger-subtle:  #FDECEA;
  --rb-danger-text:    #9B1C13;
  --rb-danger-border:  #F3C5C0;

  --rb-info:           #1D5F99;
  --rb-info-rgb:       29, 95, 153;
  --rb-info-subtle:    #E6EFF8;
  --rb-info-text:      #1A5288;
  --rb-info-border:    #BCD3EA;

  /* Text on solid status fills */
  --rb-on-solid:       #FFFFFF;

  /* Elevation */
  --rb-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --rb-shadow:    0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --rb-shadow-lg: 0 12px 24px -4px rgba(16, 24, 40, .12), 0 4px 8px -2px rgba(16, 24, 40, .06);

  /* Overlays */
  --rb-overlay:     rgba(16, 24, 32, .45);
  --rb-loader-veil: rgba(246, 247, 248, .72);

  /* Scrollbar / highlight */
  --rb-scrollbar: #CDD3D8;
  --rb-mark-bg:   #FFF1C2;

  /* ---- Bootstrap mapping ---- */
  --bs-font-sans-serif:  var(--rb-font-sans);
  --bs-font-monospace:   var(--rb-font-mono);
  --bs-body-font-family: var(--rb-font-sans);
  --bs-body-font-size:   0.875rem;
  --bs-body-line-height: 1.5;

  --bs-body-color:          #1A2328;
  --bs-body-color-rgb:      26, 35, 40;
  --bs-body-bg:             #FFFFFF;
  --bs-body-bg-rgb:         255, 255, 255;
  --bs-emphasis-color:      #0D1417;
  --bs-emphasis-color-rgb:  13, 20, 23;
  --bs-heading-color:       #1A2328;
  --bs-secondary-color:     #5B6870;
  --bs-secondary-color-rgb: 91, 104, 112;
  --bs-secondary-bg:        #F1F3F5;
  --bs-secondary-bg-rgb:    241, 243, 245;
  --bs-tertiary-color:      #8A969D;
  --bs-tertiary-color-rgb:  138, 150, 157;
  --bs-tertiary-bg:         #F1F3F5;
  --bs-tertiary-bg-rgb:     241, 243, 245;

  --bs-border-color:             #E2E6E9;
  --bs-border-color-translucent: rgba(16, 24, 40, .10);
  --bs-border-radius:     6px;
  --bs-border-radius-sm:  4px;
  --bs-border-radius-lg:  8px;
  --bs-border-radius-xl:  8px;
  --bs-border-radius-xxl: 8px;

  --bs-link-color:            #0E6B6B;
  --bs-link-color-rgb:        14, 107, 107;
  --bs-link-hover-color:      #0A5757;
  --bs-link-hover-color-rgb:  10, 87, 87;
  --bs-code-color:            #0A5757;
  --bs-highlight-bg:          #FFF1C2;

  --bs-box-shadow:    0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --bs-box-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --bs-box-shadow-lg: 0 12px 24px -4px rgba(16, 24, 40, .12), 0 4px 8px -2px rgba(16, 24, 40, .06);

  --bs-focus-ring-width:   3px;
  --bs-focus-ring-opacity: .35;
  --bs-focus-ring-color:   rgba(14, 107, 107, .35);

  --bs-form-valid-color:          #1F7A4D;
  --bs-form-valid-border-color:   #1F7A4D;
  --bs-form-invalid-color:        #B42318;
  --bs-form-invalid-border-color: #B42318;

  --bs-primary:   #0E6B6B;  --bs-primary-rgb:   14, 107, 107;
  --bs-secondary: #5B6870;  --bs-secondary-rgb: 91, 104, 112;
  --bs-success:   #1F7A4D;  --bs-success-rgb:   31, 122, 77;
  --bs-info:      #1D5F99;  --bs-info-rgb:      29, 95, 153;
  --bs-warning:   #A16207;  --bs-warning-rgb:   161, 98, 7;
  --bs-danger:    #B42318;  --bs-danger-rgb:    180, 35, 24;
  --bs-light:     #F1F3F5;  --bs-light-rgb:     241, 243, 245;
  --bs-dark:      #1A2328;  --bs-dark-rgb:      26, 35, 40;

  --bs-primary-text-emphasis:   #0A5757;
  --bs-secondary-text-emphasis: #3E4A51;
  --bs-success-text-emphasis:   #1A6B43;
  --bs-info-text-emphasis:      #1A5288;
  --bs-warning-text-emphasis:   #8A5306;
  --bs-danger-text-emphasis:    #9B1C13;
  --bs-light-text-emphasis:     #3E4A51;
  --bs-dark-text-emphasis:      #1A2328;

  --bs-primary-bg-subtle:   #E6F2F1;
  --bs-secondary-bg-subtle: #EDF0F2;
  --bs-success-bg-subtle:   #E7F4EC;
  --bs-info-bg-subtle:      #E6EFF8;
  --bs-warning-bg-subtle:   #FBF1DE;
  --bs-danger-bg-subtle:    #FDECEA;
  --bs-light-bg-subtle:     #F6F7F8;
  --bs-dark-bg-subtle:      #CDD3D8;

  --bs-primary-border-subtle:   #B5D8D5;
  --bs-secondary-border-subtle: #D7DDE1;
  --bs-success-border-subtle:   #BFE0CC;
  --bs-info-border-subtle:      #BCD3EA;
  --bs-warning-border-subtle:   #EED7A8;
  --bs-danger-border-subtle:    #F3C5C0;
  --bs-light-border-subtle:     #E2E6E9;
  --bs-dark-border-subtle:      #8A969D;
}

/* 3. Dark theme */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --rb-primary:             #3FB5AE;
  --rb-primary-rgb:         63, 181, 174;
  --rb-primary-hover:       #5CC6BF;
  --rb-primary-active:      #7FD3CD;
  --rb-primary-subtle:      rgba(63, 181, 174, .14);
  --rb-primary-subtle-text: #7FD3CD;
  --rb-primary-border:      rgba(63, 181, 174, .40);
  --rb-on-primary:          #0B1F1E;   /* dark text on the light teal */
  --rb-focus-ring:          rgba(63, 181, 174, .40);

  --rb-bg:            #0E1316;
  --rb-bg-rgb:        14, 19, 22;
  --rb-surface:       #151B1F;
  --rb-surface-rgb:   21, 27, 31;
  --rb-surface-2:     #1B2328;
  --rb-surface-2-rgb: 27, 35, 40;
  --rb-surface-3:     #222C32;
  --rb-border:        #283238;
  --rb-border-strong: #36424A;
  --rb-text:          #E4E9EB;
  --rb-text-rgb:      228, 233, 235;
  --rb-text-muted:    #9AA7AE;
  --rb-text-muted-rgb: 154, 167, 174;
  --rb-text-subtle:   #6F7D85;

  --rb-neutral:        #9AA7AE;
  --rb-neutral-subtle: rgba(255, 255, 255, .08);
  --rb-neutral-text:   #C3CCD1;
  --rb-neutral-border: #36424A;

  --rb-success:        #3FBF7F;
  --rb-success-rgb:    63, 191, 127;
  --rb-success-subtle: rgba(63, 191, 127, .14);
  --rb-success-text:   #7FD9A8;
  --rb-success-border: rgba(63, 191, 127, .35);

  --rb-warning:        #E0A33A;
  --rb-warning-rgb:    224, 163, 58;
  --rb-warning-subtle: rgba(224, 163, 58, .14);
  --rb-warning-text:   #F0C274;
  --rb-warning-border: rgba(224, 163, 58, .35);

  --rb-danger:         #F06A5F;
  --rb-danger-rgb:     240, 106, 95;
  --rb-danger-hover:   #F48A81;
  --rb-danger-subtle:  rgba(240, 106, 95, .14);
  --rb-danger-text:    #FF9C93;
  --rb-danger-border:  rgba(240, 106, 95, .35);

  --rb-info:           #5AA3E6;
  --rb-info-rgb:       90, 163, 230;
  --rb-info-subtle:    rgba(90, 163, 230, .14);
  --rb-info-text:      #9CC8F2;
  --rb-info-border:    rgba(90, 163, 230, .35);

  --rb-on-solid:       #0E1316;

  /* In dark mode depth comes from borders, not shadows */
  --rb-shadow-sm: none;
  --rb-shadow:    none;
  --rb-shadow-lg: 0 16px 32px rgba(0, 0, 0, .45);

  --rb-overlay:     rgba(0, 0, 0, .60);
  --rb-loader-veil: rgba(14, 19, 22, .72);

  --rb-scrollbar: #36424A;
  --rb-mark-bg:   rgba(224, 163, 58, .30);

  /* ---- Bootstrap mapping ---- */
  --bs-body-color:          #E4E9EB;
  --bs-body-color-rgb:      228, 233, 235;
  --bs-body-bg:             #151B1F;
  --bs-body-bg-rgb:         21, 27, 31;
  --bs-emphasis-color:      #FFFFFF;
  --bs-emphasis-color-rgb:  255, 255, 255;
  --bs-heading-color:       #E4E9EB;
  --bs-secondary-color:     #9AA7AE;
  --bs-secondary-color-rgb: 154, 167, 174;
  --bs-secondary-bg:        #1B2328;
  --bs-secondary-bg-rgb:    27, 35, 40;
  --bs-tertiary-color:      #6F7D85;
  --bs-tertiary-color-rgb:  111, 125, 133;
  --bs-tertiary-bg:         #1B2328;
  --bs-tertiary-bg-rgb:     27, 35, 40;

  --bs-border-color:             #283238;
  --bs-border-color-translucent: rgba(255, 255, 255, .10);

  --bs-link-color:            #3FB5AE;
  --bs-link-color-rgb:        63, 181, 174;
  --bs-link-hover-color:      #5CC6BF;
  --bs-link-hover-color-rgb:  92, 198, 191;
  --bs-code-color:            #7FD3CD;
  --bs-highlight-bg:          rgba(224, 163, 58, .30);

  --bs-box-shadow:    none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: 0 16px 32px rgba(0, 0, 0, .45);

  --bs-focus-ring-color: rgba(63, 181, 174, .40);

  --bs-form-valid-color:          #3FBF7F;
  --bs-form-valid-border-color:   #3FBF7F;
  --bs-form-invalid-color:        #F06A5F;
  --bs-form-invalid-border-color: #F06A5F;

  --bs-primary:   #3FB5AE;  --bs-primary-rgb:   63, 181, 174;
  --bs-secondary: #9AA7AE;  --bs-secondary-rgb: 154, 167, 174;
  --bs-success:   #3FBF7F;  --bs-success-rgb:   63, 191, 127;
  --bs-info:      #5AA3E6;  --bs-info-rgb:      90, 163, 230;
  --bs-warning:   #E0A33A;  --bs-warning-rgb:   224, 163, 58;
  --bs-danger:    #F06A5F;  --bs-danger-rgb:    240, 106, 95;
  --bs-light:     #1B2328;  --bs-light-rgb:     27, 35, 40;
  --bs-dark:      #E4E9EB;  --bs-dark-rgb:      228, 233, 235;

  --bs-primary-text-emphasis:   #7FD3CD;
  --bs-secondary-text-emphasis: #C3CCD1;
  --bs-success-text-emphasis:   #7FD9A8;
  --bs-info-text-emphasis:      #9CC8F2;
  --bs-warning-text-emphasis:   #F0C274;
  --bs-danger-text-emphasis:    #FF9C93;
  --bs-light-text-emphasis:     #C3CCD1;
  --bs-dark-text-emphasis:      #E4E9EB;

  --bs-primary-bg-subtle:   rgba(63, 181, 174, .14);
  --bs-secondary-bg-subtle: rgba(255, 255, 255, .08);
  --bs-success-bg-subtle:   rgba(63, 191, 127, .14);
  --bs-info-bg-subtle:      rgba(90, 163, 230, .14);
  --bs-warning-bg-subtle:   rgba(224, 163, 58, .14);
  --bs-danger-bg-subtle:    rgba(240, 106, 95, .14);
  --bs-light-bg-subtle:     #1B2328;
  --bs-dark-bg-subtle:      #0E1316;

  --bs-primary-border-subtle:   rgba(63, 181, 174, .40);
  --bs-secondary-border-subtle: #36424A;
  --bs-success-border-subtle:   rgba(63, 191, 127, .35);
  --bs-info-border-subtle:      rgba(90, 163, 230, .35);
  --bs-warning-border-subtle:   rgba(224, 163, 58, .35);
  --bs-danger-border-subtle:    rgba(240, 106, 95, .35);
  --bs-light-border-subtle:     #283238;
  --bs-dark-border-subtle:      #36424A;
}

/* 4. Decorative / categorical colours (charts, tags, notes) — solid only */
:root,
[data-bs-theme="light"] {
  --rb-cat-1: #0E6B6B;  /* teal   */
  --rb-cat-2: #1D5F99;  /* blue   */
  --rb-cat-3: #A16207;  /* amber  */
  --rb-cat-4: #B4232F;  /* red    */
  --rb-cat-5: #6B4FA0;  /* violet */
  --rb-cat-6: #2E8B4F;  /* green  */
  --rb-cat-7: #C6471B;  /* orange */
  --rb-cat-8: #5B6870;  /* slate  */

  /* Sticky notes (post-it) */
  --rb-note-yellow: #FFF4C2;
  --rb-note-blue:   #DCEBFA;
  --rb-note-green:  #DDF2E4;
  --rb-note-pink:   #FBE0E6;
  --rb-note-violet: #ECE3F7;
  --rb-note-text:   #1A2328;

  /* Print (always paper-like, regardless of theme) */
  --rb-print-paper:  #FFFFFF;
  --rb-print-ink:    #1A2328;
  --rb-print-muted:  #5B6870;
  --rb-print-border: #CDD3D8;
  --rb-print-fill:   #F1F3F5;
}

[data-bs-theme="dark"] {
  --rb-cat-1: #3FB5AE;
  --rb-cat-2: #5AA3E6;
  --rb-cat-3: #E0A33A;
  --rb-cat-4: #F0756D;
  --rb-cat-5: #B39DDB;
  --rb-cat-6: #6FD69A;
  --rb-cat-7: #F2935B;
  --rb-cat-8: #9AA7AE;

  --rb-note-yellow: #3A3420;
  --rb-note-blue:   #1E2E3E;
  --rb-note-green:  #1E3328;
  --rb-note-pink:   #3A2329;
  --rb-note-violet: #2C2538;
  --rb-note-text:   #E4E9EB;
}