/* =====================================================================
   CARRION - Brand Design Tokens (global.css)
   Single source of truth for the Carrion platform brand.
   Mirrors the app token file at repo-root /globals.css (1:1, no drift).

   Brand identity: BLUE + WHITE + neutral grayscale.
   - blue    = primary / brand / calls-to-action      (#1d52d4 @ 600)
   - neutral = text, surfaces, borders
   - white   = canvas
   - accent  = azure   -> FUNCTIONAL data highlight only (not a brand color)
   - negative= red     -> error / danger states only
   Logos ship in brand blue and black/white; see brand-guidelines.md.

   Blue is the default (:root). The legacy green palette is still available
   on demand via class="theme-green". The landing keeps class="theme-blue",
   which renders identically to the default.

   Fonts: Plus Jakarta Sans (display) · Montserrat (body) · DM Mono (data)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Montserrat:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root,
.theme-blue {
  /* ── Absolutes ── */
  --white: #ffffff;
  --black: #000000;
  --mint-cream: #f4f8ff;  /* the "white" canvas (cool blue-white) */
  --jungle: #0f1730;      /* deep navy surface */
  --everglade: #1a2f78;   /* indigo surface */

  /* ── Primary - Blue (brand) ── */
  --color-primary-50:  #eaf1ff;
  --color-primary-100: #d4e3ff;
  --color-primary-200: #aecaff;
  --color-primary-300: #7da6ff;
  --color-primary-400: #4a7df5;
  --color-primary-500: #2563eb;
  --color-primary-600: #1d52d4;   /* brand blue */
  --color-primary-700: #1b3fa6;   /* darker / hover */
  --color-primary-800: #1a2f78;   /* dark surface */
  --color-primary-900: #111d4d;   /* navy (dark sections) */
  --color-primary-950: #0a1330;

  /* ── Neutral - Grayscale (text / surfaces) ── */
  --color-neutral-50:  #f4f5f4;
  --color-neutral-100: #e7e8e7;
  --color-neutral-200: #cfd1cf;
  --color-neutral-300: #afb2af;
  --color-neutral-400: #878a87;
  --color-neutral-500: #707270;
  --color-neutral-600: #545654;
  --color-neutral-700: #3c3e3c;
  --color-neutral-800: #252725;
  --color-neutral-900: #131413;
  --color-neutral-950: #090909;

  /* ── Accent - Bright Azure (cool blue pop) ── */
  --color-accent-50:  #e8f6ff;
  --color-accent-100: #c6e9ff;
  --color-accent-200: #93d6ff;
  --color-accent-300: #5cc0ff;    /* bright pulse */
  --color-accent-400: #2ba6f5;
  --color-accent-500: #0e8fe0;    /* main azure */
  --color-accent-600: #0b72b8;
  --color-accent-700: #0a5990;
  --color-accent-800: #0a4670;
  --color-accent-900: #073352;
  --color-accent-950: #03202f;

  /* ── Negative - Red (error / danger only) ── */
  --color-negative-50:  #fff2f0;
  --color-negative-100: #ffdfdc;
  --color-negative-200: #ffbeb8;
  --color-negative-300: #ff8a82;
  --color-negative-400: #dd5652;
  --color-negative-500: #c53637;
  --color-negative-600: #a20519;
  --color-negative-700: #78000e;
  --color-negative-800: #4f0006;
  --color-negative-900: #2e0002;
  --color-negative-950: #1b0001;

  /* ── Semantic tokens - Light (space-separated RGB for rgb()/alpha) ── */
  --background: 244 248 255;        /* cool blue-white canvas */
  --foreground: 15 26 64;           /* navy #0f1a40 */
  --card: 255 255 255;
  --card-foreground: 15 26 64;
  --popover: 255 255 255;
  --popover-foreground: 15 26 64;
  --primary: 29 82 212;            /* brand blue #1d52d4 */
  --primary-foreground: 255 255 255;
  --secondary: 226 236 255;        /* soft blue tint */
  --secondary-foreground: 15 26 64;
  --muted: 235 240 250;
  --muted-foreground: 78 92 124;
  --accent: 14 143 224;            /* azure #0e8fe0 */
  --accent-foreground: 255 255 255;
  --destructive: 197 54 55;
  --destructive-foreground: 244 245 244;
  --border: 205 217 240;           /* brand border #cdd9f0 */
  --input: 205 217 240;
  --ring: 29 82 212;
  --radius: 0.5rem;

  /* ── Gradients (blue + azure + navy) ── */
  --gradient-hero: linear-gradient(135deg, #2ba6f5 0%, #1d52d4 60%, #0a1330 100%);
  --gradient-soft: linear-gradient(180deg, #ffffff 0%, #e8f1ff 100%);
  --gradient-orb-green: radial-gradient(circle, #2ba6f5 0%, rgba(43,166,245,0) 70%);
  --gradient-orb-teal: radial-gradient(circle, #1d52d4 0%, rgba(29,82,212,0) 70%);

  /* ── Typography families ── */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Montserrat', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* ── Type scale ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* ── Font weights ── */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ── Line heights ── */
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ── Letter spacing ── */
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ── Border radius ── */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ── Spacing (4px base) ── */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  --spacing-32: 128px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ── Green theme - legacy palette override (add class="theme-green") ── */
.theme-green {
  /* surfaces */
  --mint-cream: #fcfff2;  /* mint cream / white canvas */
  --jungle: #1d261b;      /* dark jungle green surface */
  --everglade: #203b32;   /* dark teal surface */

  /* Primary - Deep Teal-Green (brand) */
  --color-primary-50:  #effdf6;
  --color-primary-100: #d6f9e6;
  --color-primary-200: #aaf0cd;
  --color-primary-300: #72e2ae;
  --color-primary-400: #38c98d;
  --color-primary-500: #12a274;
  --color-primary-600: #0a7d5e;
  --color-primary-700: #076653;  /* brand teal-green */
  --color-primary-800: #0c342c;  /* darker teal */
  --color-primary-900: #06231d;  /* near-black teal */
  --color-primary-950: #03150f;

  /* Accent - Emerald-Teal (cool green pop, no yellow) */
  --color-accent-50:  #e3fbf2;
  --color-accent-100: #b9f4df;
  --color-accent-200: #84e9c6;
  --color-accent-300: #45d6a8;
  --color-accent-400: #16bd8c;
  --color-accent-500: #0ca176;  /* cool emerald pop */
  --color-accent-600: #0a8160;
  --color-accent-700: #0a6650;
  --color-accent-800: #094f3f;
  --color-accent-900: #073d31;
  --color-accent-950: #03211a;

  /* Semantic - light (green) */
  --background: 252 255 242;        /* mint cream / white */
  --foreground: 6 35 29;            /* deep teal */
  --card: 255 255 255;
  --card-foreground: 6 35 29;
  --popover: 255 255 255;
  --popover-foreground: 6 35 29;
  --primary: 7 102 83;             /* teal-green #076653 */
  --primary-foreground: 255 255 255;
  --secondary: 231 243 238;        /* soft green tint */
  --secondary-foreground: 6 35 29;
  --muted: 238 243 240;
  --muted-foreground: 76 100 86;
  --accent: 12 161 118;            /* cool emerald #0ca176 */
  --accent-foreground: 255 255 255;
  --destructive: 197 54 55;
  --destructive-foreground: 244 245 244;
  --border: 214 226 220;
  --input: 214 226 220;
  --ring: 7 102 83;

  /* Gradients (green + teal + white, no yellow) */
  --gradient-hero: linear-gradient(135deg, #25c66e 0%, #076653 60%, #06231d 100%);
  --gradient-soft: linear-gradient(180deg, #ffffff 0%, #e9fcef 100%);
  --gradient-orb-green: radial-gradient(circle, #25c66e 0%, rgba(37,198,110,0) 70%);
  --gradient-orb-teal: radial-gradient(circle, #076653 0%, rgba(7,102,83,0) 70%);
}

/* ── Dark theme - matches the blue root identity ── */
.dark {
  --background: 10 19 48;          /* #0a1330 */
  --foreground: 230 238 255;
  --card: 17 29 77;               /* #111d4d */
  --card-foreground: 230 238 255;
  --popover: 17 29 77;
  --popover-foreground: 230 238 255;
  --primary: 125 166 255;         /* #7da6ff */
  --primary-foreground: 10 19 48;
  --secondary: 26 47 120;         /* #1a2f78 */
  --secondary-foreground: 230 238 255;
  --muted: 26 47 120;
  --muted-foreground: 158 178 214;
  --accent: 92 192 255;           /* #5cc0ff */
  --accent-foreground: 10 19 48;
  --destructive: 221 86 82;
  --destructive-foreground: 244 245 244;
  --border: 26 47 120;
  --input: 26 47 120;
  --ring: 125 166 255;
}

/* ── Base element styles ── */
* { box-sizing: border-box; border-color: rgb(var(--border)); }

body {
  margin: 0;
  background-color: rgb(var(--background));
  color: rgb(var(--foreground));
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

code, pre, kbd, samp { font-family: var(--font-mono); }