/* ============================================================
   CST-Crypto — KAMO-C Design System (5-theme pack)
   Shared across: landing (index.html), login.html, app.html
   Theme switch mechanism: [data-kamo-theme="…"] on <html>,
   persisted in localStorage under "kamoTheme" — same key/attribute
   used by the production dashboard (apps/index2.html) so a theme
   choice made anywhere in the product carries everywhere else.
   Themes: default (KAMO-C Default) · petals · terminal · marble · solar
   ============================================================ */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 7rem);

  /* Spacing 4px grid */
  --space-1: 0.25rem;  --space-2: 0.5rem;
  --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;
  --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1240px;
  --content-full: 100%;

  /* -------- KAMO-C DEFAULT palette (cool dark neutrals, teal accent) -------- */
  --font-display: 'General Sans', 'Helvetica Neue', sans-serif;
  --font-body:    'General Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  --color-bg:               #0d1013;
  --color-surface:          #13171b;
  --color-surface-2:        #171b20;
  --color-surface-offset:   #1a1f25;
  --color-surface-offset-2: #20262d;
  --color-surface-dynamic:  #2a3139;
  --color-divider:          #21262d;
  --color-border:           #2c333b;

  --color-text:         #e7e9ec;
  --color-text-muted:   #8b929c;
  --color-text-faint:   #5b626c;
  --color-text-inverse: #10141a;

  --color-primary:           #3fc2b8;
  --color-primary-hover:     #63d1c8;
  --color-primary-active:    #2ba69c;
  --color-primary-highlight: #1a3a38;

  --color-accent:           #5b9be0;
  --color-accent-hover:     #7bb0ea;
  --color-accent-active:    #3f7bc4;
  --color-accent-highlight: #1a2c3f;

  --color-gold:             #d9b054;
  --color-gold-hover:       #e3ac6a;
  --color-gold-active:      #b8903d;
  --color-gold-highlight:   #392e15;
  --color-gold-shine:       #f0c878;

  --color-purple:           #a888e8;
  --color-purple-hover:     #bda2ef;
  --color-purple-highlight: #2a2140;

  --color-red:              #e35f7f;
  --color-red-hover:        #ea7d99;
  --color-red-highlight:    #3a1c24;
  --color-red-glow:         #ff5c85;

  --color-success:  #4cbb6e;
  --color-success-hover: #63cf85;
  --color-success-highlight: #163425;
  --color-warning:  #d99a4e;
  --color-warning-hover: #e3ac6a;
  --color-warning-highlight: #3a2b16;
  --color-error:    #e35f7f;
  --color-error-hover: #ea7d99;
  --color-error-highlight: #3a1c24;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.35);
  --shadow-lg: 0 14px 34px rgba(0,0,0,0.5);
  --shadow-petal: 0 12px 40px rgba(63, 194, 184, 0.18);
  --shadow-glow:  0 0 0 4px rgba(63, 194, 184, 0.20);
}

/* ============ THEME: PETALS · Sakura Oxblood ============ */
[data-kamo-theme="petals"] {
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body:    -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;

  --color-bg:               #0d0a0b;
  --color-surface:          #120c0e;
  --color-surface-2:        #1a1013;
  --color-surface-offset:   #221418;
  --color-surface-offset-2: #2c1a1e;
  --color-surface-dynamic:  #3d1f25;
  --color-divider:          rgba(180,60,70,.15);
  --color-border:           rgba(180,60,70,.2);

  --color-text:         #e8d5c4;
  --color-text-muted:   #a08878;
  --color-text-faint:   #6b5248;
  --color-text-inverse: #1a0f12;

  --color-primary:           #c0392b;
  --color-primary-hover:     #e05555;
  --color-primary-active:    #8f2a1f;
  --color-primary-highlight: rgba(192,57,43,.14);

  --color-accent:           #D9506A;
  --color-accent-hover:     #e97b90;
  --color-accent-active:    #b93d55;
  --color-accent-highlight: rgba(217,80,106,.16);

  --color-gold:             #c8924a;
  --color-gold-hover:       #d9a869;
  --color-gold-active:      #7a5716;
  --color-gold-highlight:   rgba(200,146,74,.18);
  --color-gold-shine:       #F4D06A;

  --color-purple:           #a25a6a;
  --color-purple-hover:     #b97a88;
  --color-purple-highlight: rgba(162,90,106,.18);

  --color-red:              #c0392b;
  --color-red-hover:        #dd4444;
  --color-red-highlight:    rgba(192,57,43,.15);
  --color-red-glow:         #FF4A66;

  --color-success:  #5a8a4a;
  --color-success-hover: #6fa35c;
  --color-success-highlight: rgba(90,138,74,.15);
  --color-warning:  #c8924a;
  --color-warning-hover: #d9a869;
  --color-warning-highlight: rgba(200,146,74,.18);
  --color-error:    #c0392b;
  --color-error-hover: #dd4444;
  --color-error-highlight: rgba(192,57,43,.15);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 22px 56px rgba(0,0,0,.6);
  --shadow-petal: 0 12px 40px rgba(217, 80, 106, 0.18);
  --shadow-glow:  0 0 0 4px rgba(217, 80, 106, 0.20);
}

/* ============ THEME: TERMINAL NOIR · Cyberpunk Trading Floor ============ */
[data-kamo-theme="terminal"] {
  --font-display: 'Courier New', Courier, monospace;
  --font-body:    'Courier New', Courier, monospace;
  --font-mono:    'Courier New', Courier, monospace;
  --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 2px; --radius-2xl: 4px;

  --color-bg:               #060708;
  --color-surface:          #0a0d0b;
  --color-surface-2:        #0d110f;
  --color-surface-offset:   #10150f;
  --color-surface-offset-2: #151b17;
  --color-surface-dynamic:  #1c2420;
  --color-divider:          rgba(57,255,140,.14);
  --color-border:           rgba(57,255,140,.22);

  --color-text:         #d7ffe6;
  --color-text-muted:   #6fae87;
  --color-text-faint:   #3d5c48;
  --color-text-inverse: #050705;

  --color-primary:           #39ff8c;
  --color-primary-hover:     #7cffb0;
  --color-primary-active:    #1fcf6b;
  --color-primary-highlight: rgba(57,255,140,.12);

  --color-accent:           #39e5ff;
  --color-accent-hover:     #7cf0ff;
  --color-accent-active:    #1fbfe0;
  --color-accent-highlight: rgba(57,229,255,.14);

  --color-gold:             #ffcf3b;
  --color-gold-hover:       #ffdd6b;
  --color-gold-active:      #d4a800;
  --color-gold-highlight:   rgba(255,207,59,.16);
  --color-gold-shine:       #fff36b;

  --color-purple:           #d43bff;
  --color-purple-hover:     #e26bff;
  --color-purple-highlight: rgba(212,59,255,.14);

  --color-red:              #ff3b6e;
  --color-red-hover:        #ff6d92;
  --color-red-highlight:    rgba(255,59,110,.16);
  --color-red-glow:         #ff3b6e;

  --color-success:  #39ff8c;
  --color-success-hover: #7cffb0;
  --color-success-highlight: rgba(57,255,140,.14);
  --color-warning:  #ffcf3b;
  --color-warning-hover: #ffdd6b;
  --color-warning-highlight: rgba(255,207,59,.16);
  --color-error:    #ff3b6e;
  --color-error-hover: #ff6d92;
  --color-error-highlight: rgba(255,59,110,.16);

  --shadow-sm: 0 0 0 1px rgba(57,255,140,.08);
  --shadow-md: 0 0 24px rgba(57,255,140,.1);
  --shadow-lg: 0 0 48px rgba(57,255,140,.14);
  --shadow-petal: 0 0 40px rgba(57,255,140,.15);
  --shadow-glow:  0 0 0 3px rgba(57,255,140,.25);
}

/* ============ THEME: MARBLE EXCHANGE · Neo-Classical Brass & Ink ============ */
[data-kamo-theme="marble"] {
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body:    -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --radius-2xl: 1.25rem;

  --color-bg:               #f4f1ea;
  --color-surface:          #fbf9f4;
  --color-surface-2:        #f7f4ec;
  --color-surface-offset:   #ede8dc;
  --color-surface-offset-2: #e3ddcd;
  --color-surface-dynamic:  #d8d0ba;
  --color-divider:          rgba(30,41,63,.12);
  --color-border:           rgba(30,41,63,.18);

  --color-text:         #1c2436;
  --color-text-muted:   #565f74;
  --color-text-faint:   #8a91a3;
  --color-text-inverse: #fbf9f4;

  --color-primary:           #14213d;
  --color-primary-hover:     #263559;
  --color-primary-active:    #0c1527;
  --color-primary-highlight: rgba(20,33,61,.08);

  --color-accent:           #2b4a75;
  --color-accent-hover:     #3a5f92;
  --color-accent-active:    #1d3455;
  --color-accent-highlight: rgba(43,74,117,.12);

  --color-gold:             #a5772a;
  --color-gold-hover:       #c28a17;
  --color-gold-active:      #7a5716;
  --color-gold-highlight:   rgba(165,119,42,.16);
  --color-gold-shine:       #d9b567;

  --color-purple:           #5b3a6e;
  --color-purple-hover:     #6f4a85;
  --color-purple-highlight: rgba(91,58,110,.12);

  --color-red:              #8c2f2f;
  --color-red-hover:        #a83c3c;
  --color-red-highlight:    rgba(140,47,47,.12);
  --color-red-glow:         #c24f4f;

  --color-success:  #1e6b45;
  --color-success-hover: #278657;
  --color-success-highlight: rgba(30,107,69,.12);
  --color-warning:  #a5720f;
  --color-warning-hover: #c28a17;
  --color-warning-highlight: rgba(165,114,15,.14);
  --color-error:    #8c2f2f;
  --color-error-hover: #a83c3c;
  --color-error-highlight: rgba(140,47,47,.12);

  --shadow-sm: 0 1px 2px rgba(28,36,54,.08);
  --shadow-md: 0 6px 20px rgba(28,36,54,.1);
  --shadow-lg: 0 18px 44px rgba(28,36,54,.14);
  --shadow-petal: 0 18px 44px rgba(28,36,54,.14);
  --shadow-glow:  0 0 0 3px rgba(165,119,42,.25);
}

/* ============ THEME: SOLAR FLUX · Bio-Luminescent Glass Futurism ============ */
[data-kamo-theme="solar"] {
  --font-display: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-body:    -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --radius-lg: 1.25rem; --radius-xl: 1.75rem; --radius-2xl: 1.75rem;

  --color-bg:               #fdf3ee;
  --color-surface:          rgba(255,255,255,.62);
  --color-surface-2:        rgba(255,255,255,.5);
  --color-surface-offset:   rgba(255,255,255,.4);
  --color-surface-offset-2: rgba(255,255,255,.3);
  --color-surface-dynamic:  rgba(255,255,255,.72);
  --color-divider:          rgba(120,70,110,.12);
  --color-border:           rgba(120,70,110,.16);

  --color-text:         #331b3a;
  --color-text-muted:   #7a5d80;
  --color-text-faint:   #ab92ac;
  --color-text-inverse: #fff8f4;

  --color-primary:           #ff6f61;
  --color-primary-hover:     #ff8b7e;
  --color-primary-active:    #e0584b;
  --color-primary-highlight: rgba(255,111,97,.16);

  --color-accent:           #9b6bd6;
  --color-accent-hover:     #b48ee0;
  --color-accent-active:    #7d4fb8;
  --color-accent-highlight: rgba(155,107,214,.16);

  --color-gold:             #f0a63e;
  --color-gold-hover:       #f4bb64;
  --color-gold-active:      #d68a1e;
  --color-gold-highlight:   rgba(240,166,62,.18);
  --color-gold-shine:       #ffd27a;

  --color-purple:           #9b6bd6;
  --color-purple-hover:     #b48ee0;
  --color-purple-highlight: rgba(155,107,214,.16);

  --color-red:              #e0457a;
  --color-red-hover:        #ea6a95;
  --color-red-highlight:    rgba(224,69,122,.16);
  --color-red-glow:         #ff6f9e;

  --color-success:  #2fae82;
  --color-success-hover: #45c396;
  --color-success-highlight: rgba(47,174,130,.16);
  --color-warning:  #f0a63e;
  --color-warning-hover: #f4bb64;
  --color-warning-highlight: rgba(240,166,62,.18);
  --color-error:    #e0457a;
  --color-error-hover: #ea6a95;
  --color-error-highlight: rgba(224,69,122,.16);

  --shadow-sm: 0 2px 8px rgba(150,80,120,.08);
  --shadow-md: 0 8px 28px rgba(150,80,120,.12);
  --shadow-lg: 0 24px 60px rgba(150,80,120,.18);
  --shadow-petal: 0 24px 60px rgba(150,80,120,.18);
  --shadow-glow:  0 0 0 4px rgba(255,111,97,.25);
}