:root {
  /* ==============================
     YIBBY BRAND PALETTE
     Source of truth
     ============================== */

  --yibby-midnight: #0E1B2D;
  --yibby-midnight-hover: #162A43;

  --yibby-copper: #B87333;
  --yibby-copper-accessible: #A55E24;

  --yibby-cream: #F6F4EE;
  --yibby-charcoal: #2B2B2B;
  --yibby-white: #FFFFFF;

  --yibby-midnight-rgb: 14, 27, 45;
  --yibby-copper-rgb: 184, 115, 51;
  --yibby-charcoal-rgb: 43, 43, 43;
  --yibby-cream-rgb: 246, 244, 238;


  /* ==============================
     YIBBY APPLICATION TOKENS
     ============================== */

  --yb-coral: var(--yibby-copper-accessible);
  --yb-charcoal: var(--yibby-charcoal);
  --yb-navy: var(--yibby-midnight);
  --yb-white: var(--yibby-white);
  --yb-mist: var(--yibby-cream);

  --yb-page-bg: var(--yibby-cream);
  --yb-header-bg: var(--yibby-midnight);

  --yb-card-bg: var(--yibby-white);
  --yb-panel-bg: var(--yibby-white);
  --yb-surface: #FBF9F5;

  --yb-text: var(--yibby-charcoal);
  --yb-text-light: var(--yibby-cream);
  --yb-text-white: var(--yibby-white);

  --yb-muted:
    rgba(
      var(--yibby-charcoal-rgb),
      0.68
    );

  --yb-primary: var(--yibby-midnight);
  --yb-primary-hover:
    var(--yibby-midnight-hover);

  --yb-accent: var(--yibby-copper);
  --yb-accent-strong:
    var(--yibby-copper-accessible);

  --yb-accent-soft:
    rgba(
      var(--yibby-copper-rgb),
      0.12
    );

  --yb-border:
    rgba(
      var(--yibby-charcoal-rgb),
      0.14
    );

  --yb-border-strong:
    rgba(
      var(--yibby-charcoal-rgb),
      0.24
    );

  --yb-border-light:
    rgba(
      255,
      255,
      255,
      0.18
    );

  --yb-shadow:
    0 12px 30px
    rgba(
      var(--yibby-midnight-rgb),
      0.12
    );


  /* ==============================
     FILES TAB TOKENS
     ============================== */

  --yb-folder-bg:
    var(--yibby-white);

  --yb-folder-bg-hover:
    #FBF9F5;

  --yb-folder-active-bg:
    rgba(
      var(--yibby-copper-rgb),
      0.12
    );

  --yb-folder-active-border:
    rgba(
      var(--yibby-copper-rgb),
      0.45
    );

  --yb-folder-active-outline:
    rgba(
      var(--yibby-copper-rgb),
      0.25
    );


  /* ==============================
     WORKFLOW TOKENS
     ============================== */

  --yb-workflow-bg:
    var(--yibby-white);

  --yb-workflow-panel-bg:
    var(--yibby-white);

  --yb-workflow-timeline-bg:
    #E9E5DE;

  --yb-workflow-text:
    var(--yibby-charcoal);

  --yb-workflow-blue:
    #0B6FFF;

  --yb-workflow-green:
    #2F855A;


  /* ==============================
     GS COMPATIBILITY

     Older Yibby code still uses these.
     They all resolve back to YIBBY.
     ============================== */

  --gs-coral:
    var(--yibby-copper-accessible);

  --gs-charcoal:
    var(--yibby-charcoal);

  --gs-navy:
    var(--yibby-midnight);

  --gs-white:
    var(--yibby-white);

  --gs-mist:
    var(--yibby-cream);


  --gs-page-bg:
    var(--yb-page-bg);

  --gs-header-bg:
    var(--yb-header-bg);

  --gs-card-bg:
    var(--yb-card-bg);

  --gs-panel-bg:
    var(--yb-panel-bg);

  --gs-surface:
    var(--yb-surface);


  --gs-text:
    var(--yb-text);

  --gs-text-light:
    var(--yb-text-light);

  --gs-text-white:
    var(--yb-text-white);

  --gs-muted:
    var(--yb-muted);


  --gs-primary:
    var(--yb-primary);

  --gs-primary-hover:
    var(--yb-primary-hover);

  --gs-accent:
    var(--yb-accent);

  --gs-accent-strong:
    var(--yb-accent-strong);

  --gs-accent-soft:
    var(--yb-accent-soft);


  --gs-border:
    var(--yb-border);

  --gs-border-strong:
    var(--yb-border-strong);

  --gs-border-light:
    var(--yb-border-light);

  --gs-shadow:
    var(--yb-shadow);


  --gs-folder-bg:
    var(--yb-folder-bg);

  --gs-folder-bg-hover:
    var(--yb-folder-bg-hover);

  --gs-folder-active-bg:
    var(--yb-folder-active-bg);

  --gs-folder-active-border:
    var(--yb-folder-active-border);

  --gs-folder-active-outline:
    var(--yb-folder-active-outline);


  --gs-workflow-bg:
    var(--yb-workflow-bg);

  --gs-workflow-panel-bg:
    var(--yb-workflow-panel-bg);

  --gs-workflow-timeline-bg:
    var(--yb-workflow-timeline-bg);

  --gs-workflow-text:
    var(--yb-workflow-text);

  --gs-workflow-blue:
    var(--yb-workflow-blue);

  --gs-workflow-green:
    var(--yb-workflow-green);

  --gs-green:
    var(--yb-workflow-green);


  /* ==============================
     TABLE BUILDER COMPATIBILITY
     ============================== */

  --tb-bg:
    var(--yb-card-bg);

  --tb-surface:
    var(--yb-surface);

  --tb-text:
    var(--yb-text);

  --tb-muted:
    var(--yb-muted);

  --tb-border:
    var(--yb-border);

  --tb-border-strong:
    var(--yb-border-strong);

  --tb-accent:
    var(--yb-accent);

  --tb-accent-strong:
    var(--yb-accent-strong);

  --tb-accent-soft:
    var(--yb-accent-soft);

  --tb-primary:
    var(--yb-primary);


  /* ==============================
     TEMPORARY YACADIA COMPATIBILITY

     Remove these gradually as old CSS
     is migrated to Yibby variable names.
     ============================== */

  --yacadia-midnight:
    var(--yibby-midnight);

  --yacadia-midnight-hover:
    var(--yibby-midnight-hover);

  --yacadia-copper:
    var(--yibby-copper);

  --yacadia-copper-accessible:
    var(--yibby-copper-accessible);

  --yacadia-cream:
    var(--yibby-cream);

  --yacadia-light:
    var(--yibby-cream);

  --yacadia-charcoal:
    var(--yibby-charcoal);

  --yacadia-white:
    var(--yibby-white);


  --yacadia-midnight-rgb:
    var(--yibby-midnight-rgb);

  --yacadia-copper-rgb:
    var(--yibby-copper-rgb);

  --yacadia-charcoal-rgb:
    var(--yibby-charcoal-rgb);

  --yacadia-cream-rgb:
    var(--yibby-cream-rgb);

  --yacadia-light-rgb:
    var(--yibby-cream-rgb);
}


/* ==============================
   DARK MODE
   ============================== */

[data-theme="dark"],
body.dark {
  --yb-page-bg:
    #08111E;

  --yb-card-bg:
    var(--yibby-midnight);

  --yb-panel-bg:
    #162A43;

  --yb-surface:
    #162A43;

  --yb-text:
    var(--yibby-cream);

  --yb-text-light:
    var(--yibby-cream);

  --yb-muted:
    rgba(
      var(--yibby-cream-rgb),
      0.68
    );

  --yb-border:
    rgba(
      var(--yibby-cream-rgb),
      0.18
    );

  --yb-border-strong:
    rgba(
      var(--yibby-cream-rgb),
      0.28
    );

  --yb-shadow:
    0 14px 34px
    rgba(
      0,
      0,
      0,
      0.34
    );

  --yb-folder-bg:
    var(--yibby-midnight);

  --yb-folder-bg-hover:
    #162A43;

  --yb-workflow-bg:
    var(--yibby-midnight);

  --yb-workflow-panel-bg:
    #162A43;

  --yb-workflow-text:
    var(--yibby-cream);
}