/**
 * foxora-brand-tokens.css  —  v2.0
 *
 * Canonical Foxora brand color tokens.
 * Aligned 1:1 with foxora-web/src/lib/productBranding.js (live megamenu).
 *
 * Consumed by:
 *   - foxora.ai website
 *   - product UIs (Desktop, Eye, Shell, fur, Kits)
 *   - docs, marketing assets
 *   - foxora-brand-tokens.json (mirror)
 *   - foxsh/src/tui.rs (mirror via generator)
 *
 * ====================================================================
 *  RENDERING RULE — DO NOT MISINTERPRET
 *  ---------------------------------------------------------------
 *  In the Foxora mark:
 *    - The outer fox polygon is ALWAYS white (#FFFFFF)
 *    - The top triangle is the product accent (the ONLY part that
 *      tints per product)
 *  Do NOT make the fox shape navy. The fox is white. Only the
 *  triangle tints.
 * ====================================================================
 */

:root {
  /* ===== Base canvas ===== */
  --foxora-bg-main:      #0E0D0C;
  --foxora-bg-sidebar:   #141312;
  --foxora-bg-card:      #171717;
  --foxora-fg-primary:   #F5F5F5;
  --foxora-fg-secondary: #A3A3A3;
  --foxora-fg-tertiary:  #737373;

  /* Dock-specific text tiers (from CommonDock.jsx) */
  --foxora-text-hi:      #E5E5E5;
  --foxora-text-md:      #A3A3A3;
  --foxora-text-lo:      #737373;

  /* Border tiers (from CommonDock.jsx) */
  --foxora-border-sub:     rgba(255,255,255,0.05);
  --foxora-border-default: rgba(255,255,255,0.08);
  --foxora-border-hover:   rgba(255,255,255,0.12);

  /* ===== Mark geometry ===== */
  --foxora-mark-white: #FFFFFF;   /* fox polygon / wordmark — always white */

  /* ===== OS (coral) ===== */
  --foxora-os:             #FF4E46;
  --foxora-os-light:       #FF6A4E;
  --foxora-os-deep:        #C73B34;
  --foxora-os-rgb:         255, 78, 70;
  --foxora-os-text:        #FFFFFF;

  /* ===== Desktop (orange) ===== */
  --foxora-desktop:        #FF8A4A;
  --foxora-desktop-light:  #FFAE7B;
  --foxora-desktop-deep:   #E06B2C;
  --foxora-desktop-rgb:    255, 138, 74;
  --foxora-desktop-text:   #FFFFFF;

  /* ===== Foxeye (blue) ===== */
  --foxora-foxeye:         #4285F4;
  --foxora-foxeye-light:   #73A4F8;
  --foxora-foxeye-deep:    #2E65BF;
  --foxora-foxeye-rgb:     66, 133, 244;
  --foxora-foxeye-text:    #FFFFFF;

  /* ===== Foxsh (mint/sage) ===== */
  --foxora-foxsh:          #A8D5BA;
  --foxora-foxsh-light:    #C6E4D1;
  --foxora-foxsh-deep:     #7CB594;
  --foxora-foxsh-rgb:      168, 213, 186;
  --foxora-foxsh-text:     #0F1F16;

  /* ===== fur (warm sand) ===== */
  --foxora-fur:            #F1C27B;
  --foxora-fur-light:      #F6D7A8;
  --foxora-fur-deep:       #C99449;
  --foxora-fur-rgb:        241, 194, 123;
  --foxora-fur-text:       #2B1B09;

  /* ===== Kits (teal) ===== */
  --foxora-kits:           #A3D1CC;
  --foxora-kits-light:     #BFDEDA;
  --foxora-kits-deep:      #6FA19C;
  --foxora-kits-rgb:       163, 209, 204;
  --foxora-kits-text:      #0A1F1E;

  /* ===== Semantic ===== */
  --foxora-success: #5DD585;
  --foxora-warning: #F1C27B;
  --foxora-error:   #FF4E46;
  --foxora-info:    #4285F4;
}


/* ===== Product-scoped themes =====
   Apply .theme-<product> to any container to set --foxora-accent etc.  */

.theme-os {
  --foxora-accent:       var(--foxora-os);
  --foxora-accent-light: var(--foxora-os-light);
  --foxora-accent-deep:  var(--foxora-os-deep);
  --foxora-accent-rgb:   var(--foxora-os-rgb);
  --foxora-accent-text:  var(--foxora-os-text);
}
.theme-desktop {
  --foxora-accent:       var(--foxora-desktop);
  --foxora-accent-light: var(--foxora-desktop-light);
  --foxora-accent-deep:  var(--foxora-desktop-deep);
  --foxora-accent-rgb:   var(--foxora-desktop-rgb);
  --foxora-accent-text:  var(--foxora-desktop-text);
}
.theme-foxeye {
  --foxora-accent:       var(--foxora-foxeye);
  --foxora-accent-light: var(--foxora-foxeye-light);
  --foxora-accent-deep:  var(--foxora-foxeye-deep);
  --foxora-accent-rgb:   var(--foxora-foxeye-rgb);
  --foxora-accent-text:  var(--foxora-foxeye-text);
}
.theme-foxsh {
  --foxora-accent:       var(--foxora-foxsh);
  --foxora-accent-light: var(--foxora-foxsh-light);
  --foxora-accent-deep:  var(--foxora-foxsh-deep);
  --foxora-accent-rgb:   var(--foxora-foxsh-rgb);
  --foxora-accent-text:  var(--foxora-foxsh-text);
}
.theme-fur {
  --foxora-accent:       var(--foxora-fur);
  --foxora-accent-light: var(--foxora-fur-light);
  --foxora-accent-deep:  var(--foxora-fur-deep);
  --foxora-accent-rgb:   var(--foxora-fur-rgb);
  --foxora-accent-text:  var(--foxora-fur-text);
}
.theme-kits {
  --foxora-accent:       var(--foxora-kits);
  --foxora-accent-light: var(--foxora-kits-light);
  --foxora-accent-deep:  var(--foxora-kits-deep);
  --foxora-accent-rgb:   var(--foxora-kits-rgb);
  --foxora-accent-text:  var(--foxora-kits-text);
}
.theme-mono {
  --foxora-accent:       var(--foxora-mark-white);
  --foxora-accent-light: var(--foxora-mark-white);
  --foxora-accent-deep:  #CCCCCC;
  --foxora-accent-rgb:   255, 255, 255;
  --foxora-accent-text:  var(--foxora-bg-main);
}


/* ===== Common dock glass effect ===== */
.foxora-dock {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}


/* ===== Helpers =====
   Use these patterns in product components:  */

/* Tile wash / hover row background */
.foxora-accent-wash   { background: rgba(var(--foxora-accent-rgb), 0.08); }
.foxora-accent-wash-h { background: rgba(var(--foxora-accent-rgb), 0.14); }
.foxora-accent-wash-a { background: rgba(var(--foxora-accent-rgb), 0.22); }

/* Get Started button gradient (light → base accent) */
.foxora-cta-gradient {
  background-image: linear-gradient(
    180deg,
    var(--foxora-accent-light) 0%,
    var(--foxora-accent) 100%
  );
  color: var(--foxora-accent-text);
}