/* ============================================================ JobYako Design Tokens Single source of truth for colors, spacing, typography, radii. Theme switching: add data-theme="" to element. Available themes: default | slate-lime | midnight-rose | ocean-gold | stone-copper | nordic | electric | fire | cyber | tropical | graffiti ============================================================ */ /* ============================================================ DEFAULT THEME (Dark Navy / Orange) ============================================================ */ :root, [data-theme="default"] { --color-navy: #0D1B2A; --color-navy-light: #1a3556; --color-primary: #FF6B35; --color-primary-hover:#ff8559; --color-secondary: #00C9A7; --color-secondary-dark:#0a8e76; --color-accent: #FFB703; --color-accent-dark: #b07f00; --color-warm-white: #F8F6F2; --color-gray: #6B7280; --color-bg: #F8F6F2; --color-surface: #ffffff; --color-border: #ece9e3; --color-border-input:#e0ddd6; --color-border-light:#f3f1ec; --tint-primary: rgba(255, 107, 53, 0.12); --tint-primary-strong:rgba(255, 107, 53, 0.18); --tint-secondary: rgba(0, 201, 167, 0.15); --tint-secondary-soft:rgba(0, 201, 167, 0.12); --tint-accent: rgba(255, 183, 3, 0.18); --tint-navy: rgba(13, 27, 42, 0.08); /* Keep legacy aliases for gradual migration */ --color-orange: var(--color-primary); --color-orange-hover:var(--color-primary-hover); --color-teal: var(--color-secondary); --color-teal-dark: var(--color-secondary-dark); --color-amber: var(--color-accent); --color-amber-dark: var(--color-accent-dark); --tint-orange: var(--tint-primary); --tint-orange-strong:var(--tint-primary-strong); --tint-teal: var(--tint-secondary); --tint-teal-soft: var(--tint-secondary-soft); --tint-amber: var(--tint-accent); --text-primary: #0D1B2A; --text-secondary: #4a5563; --text-muted: #6B7280; --text-on-dark: #F8F6F2; --text-on-dark-muted:#b8c2d0; --text-on-dark-dim: #9aa5b8; /* Hero / nav background */ --color-hero-bg: #0D1B2A; --color-hero-bg2: #1a3556; --hero-orb-color: rgba(0, 201, 167, 0.15); --hero-stripe-color: rgba(255, 107, 53, 0.035); /* Alert tints using raw channel values for rgba() */ --rgb-secondary: 0, 201, 167; --rgb-accent: 255, 183, 3; --rgb-primary: 255, 107, 53; --rgb-navy: 13, 27, 42; --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.04); --shadow-md: 0 4px 12px rgba(13, 27, 42, 0.06); --shadow-lg: 0 8px 24px rgba(13, 27, 42, 0.08); --shadow-xl: 0 12px 32px rgba(13, 27, 42, 0.12); --shadow-pill: 0 8px 24px rgba(13, 27, 42, 0.18); --shadow-modal:0 20px 40px rgba(13, 27, 42, 0.3); --shadow-primary-glow:0 12px 32px rgba(255, 107, 53, 0.12); } /* ============================================================ SLATE & LIME ============================================================ */ [data-theme="slate-lime"] { --color-navy: #1C2B1E; --color-navy-light: #2d4a30; --color-primary: #6DB33F; --color-primary-hover:#85c958; --color-secondary: #3ECFCF; --color-secondary-dark:#1d9494; --color-accent: #F0C040; --color-accent-dark: #b08a00; --color-warm-white: #F4F6F4; --color-gray: #637168; --color-bg: #F4F6F4; --color-surface: #ffffff; --color-border: #e0e8e0; --color-border-input:#cfdacf; --color-border-light:#edf3ed; --tint-primary: rgba(109, 179, 63, 0.12); --tint-primary-strong:rgba(109, 179, 63, 0.2); --tint-secondary: rgba(62, 207, 207, 0.15); --tint-secondary-soft:rgba(62, 207, 207, 0.10); --tint-accent: rgba(240, 192, 64, 0.18); --tint-navy: rgba(28, 43, 30, 0.08); --color-orange: var(--color-primary); --color-orange-hover:var(--color-primary-hover); --color-teal: var(--color-secondary); --color-teal-dark: var(--color-secondary-dark); --color-amber: var(--color-accent); --color-amber-dark: var(--color-accent-dark); --tint-orange: var(--tint-primary); --tint-orange-strong:var(--tint-primary-strong); --tint-teal: var(--tint-secondary); --tint-teal-soft: var(--tint-secondary-soft); --tint-amber: var(--tint-accent); --text-primary: #1C2B1E; --text-secondary: #3d5240; --text-muted: #637168; --text-on-dark: #F4F6F4; --text-on-dark-muted:#a8bfaa; --text-on-dark-dim: #8aaa8e; --color-hero-bg: #1C2B1E; --color-hero-bg2: #2d4a30; --hero-orb-color: rgba(62, 207, 207, 0.18); --hero-stripe-color: rgba(109, 179, 63, 0.04); --rgb-secondary: 62, 207, 207; --rgb-accent: 240, 192, 64; --rgb-primary: 109, 179, 63; --rgb-navy: 28, 43, 30; --shadow-sm: 0 1px 2px rgba(28, 43, 30, 0.04); --shadow-md: 0 4px 12px rgba(28, 43, 30, 0.06); --shadow-lg: 0 8px 24px rgba(28, 43, 30, 0.08); --shadow-xl: 0 12px 32px rgba(28, 43, 30, 0.12); --shadow-pill: 0 8px 24px rgba(28, 43, 30, 0.18); --shadow-modal:0 20px 40px rgba(28, 43, 30, 0.3); --shadow-primary-glow:0 12px 32px rgba(109, 179, 63, 0.15); } /* ============================================================ MIDNIGHT ROSE ============================================================ */ [data-theme="midnight-rose"] { --color-navy: #1A0F1A; --color-navy-light: #331525; --color-primary: #E05C8A; --color-primary-hover:#e87aa3; --color-secondary: #9B59D9; --color-secondary-dark:#6b35a8; --color-accent: #F9A73A; --color-accent-dark: #c07800; --color-warm-white: #FAF7F9; --color-gray: #7a6878; --color-bg: #FAF7F9; --color-surface: #ffffff; --color-border: #ede4eb; --color-border-input:#e0d4dc; --color-border-light:#f5eff3; --tint-primary: rgba(224, 92, 138, 0.12); --tint-primary-strong:rgba(224, 92, 138, 0.2); --tint-secondary: rgba(155, 89, 217, 0.13); --tint-secondary-soft:rgba(155, 89, 217, 0.09); --tint-accent: rgba(249, 167, 58, 0.18); --tint-navy: rgba(26, 15, 26, 0.08); --color-orange: var(--color-primary); --color-orange-hover:var(--color-primary-hover); --color-teal: var(--color-secondary); --color-teal-dark: var(--color-secondary-dark); --color-amber: var(--color-accent); --color-amber-dark: var(--color-accent-dark); --tint-orange: var(--tint-primary); --tint-orange-strong:var(--tint-primary-strong); --tint-teal: var(--tint-secondary); --tint-teal-soft: var(--tint-secondary-soft); --tint-amber: var(--tint-accent); --text-primary: #1A0F1A; --text-secondary: #4a3048; --text-muted: #7a6878; --text-on-dark: #FAF7F9; --text-on-dark-muted:#c4a8bc; --text-on-dark-dim: #a08898; --color-hero-bg: #1A0F1A; --color-hero-bg2: #331525; --hero-orb-color: rgba(155, 89, 217, 0.2); --hero-stripe-color: rgba(224, 92, 138, 0.04); --rgb-secondary: 155, 89, 217; --rgb-accent: 249, 167, 58; --rgb-primary: 224, 92, 138; --rgb-navy: 26, 15, 26; --shadow-sm: 0 1px 2px rgba(26, 15, 26, 0.04); --shadow-md: 0 4px 12px rgba(26, 15, 26, 0.06); --shadow-lg: 0 8px 24px rgba(26, 15, 26, 0.08); --shadow-xl: 0 12px 32px rgba(26, 15, 26, 0.12); --shadow-pill: 0 8px 24px rgba(26, 15, 26, 0.18); --shadow-modal:0 20px 40px rgba(26, 15, 26, 0.3); --shadow-primary-glow:0 12px 32px rgba(224, 92, 138, 0.15); } /* ============================================================ OCEAN & GOLD ============================================================ */ [data-theme="ocean-gold"] { --color-navy: #0B2745; --color-navy-light: #153d66; --color-primary: #F0A500; --color-primary-hover:#f8bc30; --color-secondary: #00B4D8; --color-secondary-dark:#007d97; --color-accent: #2ECC71; --color-accent-dark: #1a9950; --color-warm-white: #F5F8FA; --color-gray: #607080; --color-bg: #F5F8FA; --color-surface: #ffffff; --color-border: #dde6ee; --color-border-input:#ccd8e4; --color-border-light:#eaf0f6; --tint-primary: rgba(240, 165, 0, 0.12); --tint-primary-strong:rgba(240, 165, 0, 0.2); --tint-secondary: rgba(0, 180, 216, 0.13); --tint-secondary-soft:rgba(0, 180, 216, 0.09); --tint-accent: rgba(46, 204, 113, 0.15); --tint-navy: rgba(11, 39, 69, 0.08); --color-orange: var(--color-primary); --color-orange-hover:var(--color-primary-hover); --color-teal: var(--color-secondary); --color-teal-dark: var(--color-secondary-dark); --color-amber: var(--color-accent); --color-amber-dark: var(--color-accent-dark); --tint-orange: var(--tint-primary); --tint-orange-strong:var(--tint-primary-strong); --tint-teal: var(--tint-secondary); --tint-teal-soft: var(--tint-secondary-soft); --tint-amber: var(--tint-accent); --text-primary: #0B2745; --text-secondary: #2a4560; --text-muted: #607080; --text-on-dark: #F5F8FA; --text-on-dark-muted:#a0b8cc; --text-on-dark-dim: #7a9ab5; --color-hero-bg: #0B2745; --color-hero-bg2: #153d66; --hero-orb-color: rgba(0, 180, 216, 0.18); --hero-stripe-color: rgba(240, 165, 0, 0.04); --rgb-secondary: 0, 180, 216; --rgb-accent: 46, 204, 113; --rgb-primary: 240, 165, 0; --rgb-navy: 11, 39, 69; --shadow-sm: 0 1px 2px rgba(11, 39, 69, 0.04); --shadow-md: 0 4px 12px rgba(11, 39, 69, 0.06); --shadow-lg: 0 8px 24px rgba(11, 39, 69, 0.08); --shadow-xl: 0 12px 32px rgba(11, 39, 69, 0.12); --shadow-pill: 0 8px 24px rgba(11, 39, 69, 0.18); --shadow-modal:0 20px 40px rgba(11, 39, 69, 0.3); --shadow-primary-glow:0 12px 32px rgba(240, 165, 0, 0.15); } /* ============================================================ STONE & COPPER ============================================================ */ [data-theme="stone-copper"] { --color-navy: #2C2218; --color-navy-light: #4a3828; --color-primary: #C2703A; --color-primary-hover:#d98a55; --color-secondary: #5BBFA0; --color-secondary-dark:#348a72; --color-accent: #D4B86A; --color-accent-dark: #9a7e30; --color-warm-white: #F6F4F2; --color-gray: #7a6e65; --color-bg: #F6F4F2; --color-surface: #ffffff; --color-border: #e5dfd8; --color-border-input:#d8d0c8; --color-border-light:#f0ece8; --tint-primary: rgba(194, 112, 58, 0.12); --tint-primary-strong:rgba(194, 112, 58, 0.2); --tint-secondary: rgba(91, 191, 160, 0.13); --tint-secondary-soft:rgba(91, 191, 160, 0.09); --tint-accent: rgba(212, 184, 106, 0.2); --tint-navy: rgba(44, 34, 24, 0.08); --color-orange: var(--color-primary); --color-orange-hover:var(--color-primary-hover); --color-teal: var(--color-secondary); --color-teal-dark: var(--color-secondary-dark); --color-amber: var(--color-accent); --color-amber-dark: var(--color-accent-dark); --tint-orange: var(--tint-primary); --tint-orange-strong:var(--tint-primary-strong); --tint-teal: var(--tint-secondary); --tint-teal-soft: var(--tint-secondary-soft); --tint-amber: var(--tint-accent); --text-primary: #2C2218; --text-secondary: #4a3828; --text-muted: #7a6e65; --text-on-dark: #F6F4F2; --text-on-dark-muted:#c0b0a5; --text-on-dark-dim: #a09085; --color-hero-bg: #2C2218; --color-hero-bg2: #4a3828; --hero-orb-color: rgba(91, 191, 160, 0.18); --hero-stripe-color: rgba(194, 112, 58, 0.04); --rgb-secondary: 91, 191, 160; --rgb-accent: 212, 184, 106; --rgb-primary: 194, 112, 58; --rgb-navy: 44, 34, 24; --shadow-sm: 0 1px 2px rgba(44, 34, 24, 0.04); --shadow-md: 0 4px 12px rgba(44, 34, 24, 0.06); --shadow-lg: 0 8px 24px rgba(44, 34, 24, 0.08); --shadow-xl: 0 12px 32px rgba(44, 34, 24, 0.12); --shadow-pill: 0 8px 24px rgba(44, 34, 24, 0.18); --shadow-modal:0 20px 40px rgba(44, 34, 24, 0.3); --shadow-primary-glow:0 12px 32px rgba(194, 112, 58, 0.15); } /* ============================================================ NORDIC ICE ============================================================ */ [data-theme="nordic"] { --color-navy: #1B3050; --color-navy-light: #264670; --color-primary: #4A9DDB; --color-primary-hover:#6ab4e8; --color-secondary: #48C8A4; --color-secondary-dark:#289878; --color-accent: #F5A623; --color-accent-dark: #b07000; --color-warm-white: #F0F4F8; --color-gray: #5d7490; --color-bg: #F0F4F8; --color-surface: #ffffff; --color-border: #d8e4ef; --color-border-input:#c5d5e5; --color-border-light:#e8f0f8; --tint-primary: rgba(74, 157, 219, 0.12); --tint-primary-strong:rgba(74, 157, 219, 0.2); --tint-secondary: rgba(72, 200, 164, 0.13); --tint-secondary-soft:rgba(72, 200, 164, 0.09); --tint-accent: rgba(245, 166, 35, 0.18); --tint-navy: rgba(27, 48, 80, 0.08); --color-orange: var(--color-primary); --color-orange-hover:var(--color-primary-hover); --color-teal: var(--color-secondary); --color-teal-dark: var(--color-secondary-dark); --color-amber: var(--color-accent); --color-amber-dark: var(--color-accent-dark); --tint-orange: var(--tint-primary); --tint-orange-strong:var(--tint-primary-strong); --tint-teal: var(--tint-secondary); --tint-teal-soft: var(--tint-secondary-soft); --tint-amber: var(--tint-accent); --text-primary: #1B3050; --text-secondary: #344d6a; --text-muted: #5d7490; --text-on-dark: #F0F4F8; --text-on-dark-muted:#a0b8cc; --text-on-dark-dim: #7a9ab5; --color-hero-bg: #1B3050; --color-hero-bg2: #264670; --hero-orb-color: rgba(72, 200, 164, 0.18); --hero-stripe-color: rgba(74, 157, 219, 0.04); --rgb-secondary: 72, 200, 164; --rgb-accent: 245, 166, 35; --rgb-primary: 74, 157, 219; --rgb-navy: 27, 48, 80; --shadow-sm: 0 1px 2px rgba(27, 48, 80, 0.04); --shadow-md: 0 4px 12px rgba(27, 48, 80, 0.06); --shadow-lg: 0 8px 24px rgba(27, 48, 80, 0.08); --shadow-xl: 0 12px 32px rgba(27, 48, 80, 0.12); --shadow-pill: 0 8px 24px rgba(27, 48, 80, 0.18); --shadow-modal:0 20px 40px rgba(27, 48, 80, 0.3); --shadow-primary-glow:0 12px 32px rgba(74, 157, 219, 0.15); } /* ============================================================ ELECTRIC SHOCK (Bold) ============================================================ */ [data-theme="electric"] { --color-navy: #000000; --color-navy-light: #111111; --color-primary: #00FF88; --color-primary-hover:#33ffaa; --color-secondary: #FF0080; --color-secondary-dark:#cc0060; --color-accent: #FFE600; --color-accent-dark: #ccb800; --color-warm-white: #0A0A0A; --color-gray: #888888; --color-bg: #0A0A0A; --color-surface: #111111; --color-border: #222222; --color-border-input:#333333; --color-border-light:#1a1a1a; --tint-primary: rgba(0, 255, 136, 0.12); --tint-primary-strong:rgba(0, 255, 136, 0.2); --tint-secondary: rgba(255, 0, 128, 0.13); --tint-secondary-soft:rgba(255, 0, 128, 0.09); --tint-accent: rgba(255, 230, 0, 0.18); --tint-navy: rgba(255, 255, 255, 0.06); --color-orange: var(--color-primary); --color-orange-hover:var(--color-primary-hover); --color-teal: var(--color-secondary); --color-teal-dark: var(--color-secondary-dark); --color-amber: var(--color-accent); --color-amber-dark: var(--color-accent-dark); --tint-orange: var(--tint-primary); --tint-orange-strong:var(--tint-primary-strong); --tint-teal: var(--tint-secondary); --tint-teal-soft: var(--tint-secondary-soft); --tint-amber: var(--tint-accent); --text-primary: #FFFFFF; --text-secondary: #cccccc; --text-muted: #888888; --text-on-dark: #FFFFFF; --text-on-dark-muted:#aaaaaa; --text-on-dark-dim: #888888; --color-hero-bg: #000000; --color-hero-bg2: #0a1a0a; --hero-orb-color: rgba(0, 255, 136, 0.2); --hero-stripe-color: rgba(0, 255, 136, 0.03); --rgb-secondary: 255, 0, 128; --rgb-accent: 255, 230, 0; --rgb-primary: 0, 255, 136; --rgb-navy: 0, 0, 0; --shadow-sm: 0 1px 2px rgba(0, 255, 136, 0.06); --shadow-md: 0 4px 12px rgba(0, 255, 136, 0.08); --shadow-lg: 0 8px 24px rgba(0, 255, 136, 0.1); --shadow-xl: 0 12px 32px rgba(0, 255, 136, 0.14); --shadow-pill: 0 8px 24px rgba(0, 255, 136, 0.2); --shadow-modal:0 20px 40px rgba(0, 0, 0, 0.8); --shadow-primary-glow:0 12px 32px rgba(0, 255, 136, 0.25); } /* ============================================================ ON FIRE (Bold) ============================================================ */ [data-theme="fire"] { --color-navy: #0F0500; --color-navy-light: #3d1000; --color-primary: #FF3D00; --color-primary-hover:#ff6030; --color-secondary: #FF9E00; --color-secondary-dark:#cc7d00; --color-accent: #FFEB00; --color-accent-dark: #ccbc00; --color-warm-white: #FFF5EE; --color-gray: #a07060; --color-bg: #0F0500; --color-surface: #1a0800; --color-border: #2d1200; --color-border-input:#3d1800; --color-border-light:#200a00; --tint-primary: rgba(255, 61, 0, 0.18); --tint-primary-strong:rgba(255, 61, 0, 0.28); --tint-secondary: rgba(255, 158, 0, 0.18); --tint-secondary-soft:rgba(255, 158, 0, 0.12); --tint-accent: rgba(255, 235, 0, 0.18); --tint-navy: rgba(255, 255, 255, 0.05); --color-orange: var(--color-primary); --color-orange-hover:var(--color-primary-hover); --color-teal: var(--color-secondary); --color-teal-dark: var(--color-secondary-dark); --color-amber: var(--color-accent); --color-amber-dark: var(--color-accent-dark); --tint-orange: var(--tint-primary); --tint-orange-strong:var(--tint-primary-strong); --tint-teal: var(--tint-secondary); --tint-teal-soft: var(--tint-secondary-soft); --tint-amber: var(--tint-accent); --text-primary: #FFF5EE; --text-secondary: #ffd0b0; --text-muted: #a07060; --text-on-dark: #FFF5EE; --text-on-dark-muted:#c09080; --text-on-dark-dim: #a07060; --color-hero-bg: #0F0500; --color-hero-bg2: #200800; --hero-orb-color: rgba(255, 158, 0, 0.2); --hero-stripe-color: rgba(255, 61, 0, 0.06); --rgb-secondary: 255, 158, 0; --rgb-accent: 255, 235, 0; --rgb-primary: 255, 61, 0; --rgb-navy: 15, 5, 0; --shadow-sm: 0 1px 2px rgba(255, 61, 0, 0.08); --shadow-md: 0 4px 12px rgba(255, 61, 0, 0.12); --shadow-lg: 0 8px 24px rgba(255, 61, 0, 0.16); --shadow-xl: 0 12px 32px rgba(255, 61, 0, 0.2); --shadow-pill: 0 8px 24px rgba(255, 61, 0, 0.25); --shadow-modal:0 20px 40px rgba(0, 0, 0, 0.85); --shadow-primary-glow:0 12px 32px rgba(255, 61, 0, 0.35); } /* ============================================================ CYBER PURPLE (Bold) ============================================================ */ [data-theme="cyber"] { --color-navy: #07020F; --color-navy-light: #1e0550; --color-primary: #BF5FFF; --color-primary-hover:#d085ff; --color-secondary: #00F5FF; --color-secondary-dark:#00b8c0; --color-accent: #FF2D78; --color-accent-dark: #cc1055; --color-warm-white: #EEE0FF; --color-gray: #7a6a99; --color-bg: #07020F; --color-surface: #0e0520; --color-border: #1e0f3a; --color-border-input:#2a1550; --color-border-light:#140830; --tint-primary: rgba(191, 95, 255, 0.15); --tint-primary-strong:rgba(191, 95, 255, 0.25); --tint-secondary: rgba(0, 245, 255, 0.13); --tint-secondary-soft:rgba(0, 245, 255, 0.08); --tint-accent: rgba(255, 45, 120, 0.15); --tint-navy: rgba(255, 255, 255, 0.05); --color-orange: var(--color-primary); --color-orange-hover:var(--color-primary-hover); --color-teal: var(--color-secondary); --color-teal-dark: var(--color-secondary-dark); --color-amber: var(--color-accent); --color-amber-dark: var(--color-accent-dark); --tint-orange: var(--tint-primary); --tint-orange-strong:var(--tint-primary-strong); --tint-teal: var(--tint-secondary); --tint-teal-soft: var(--tint-secondary-soft); --tint-amber: var(--tint-accent); --text-primary: #EEE0FF; --text-secondary: #c8b0f0; --text-muted: #7a6a99; --text-on-dark: #EEE0FF; --text-on-dark-muted:#9980cc; --text-on-dark-dim: #7a6a99; --color-hero-bg: #07020F; --color-hero-bg2: #100328; --hero-orb-color: rgba(0, 245, 255, 0.15); --hero-stripe-color: rgba(191, 95, 255, 0.04); --rgb-secondary: 0, 245, 255; --rgb-accent: 255, 45, 120; --rgb-primary: 191, 95, 255; --rgb-navy: 7, 2, 15; --shadow-sm: 0 1px 2px rgba(191, 95, 255, 0.06); --shadow-md: 0 4px 12px rgba(191, 95, 255, 0.1); --shadow-lg: 0 8px 24px rgba(191, 95, 255, 0.14); --shadow-xl: 0 12px 32px rgba(191, 95, 255, 0.18); --shadow-pill: 0 8px 24px rgba(191, 95, 255, 0.22); --shadow-modal:0 20px 40px rgba(0, 0, 0, 0.9); --shadow-primary-glow:0 12px 32px rgba(191, 95, 255, 0.35); } /* ============================================================ TROPICAL BLAST (Bold) ============================================================ */ [data-theme="tropical"] { --color-navy: #003D2B; --color-navy-light: #005540; --color-primary: #FF1744; --color-primary-hover:#ff4d6a; --color-secondary: #00E676; --color-secondary-dark:#00a854; --color-accent: #FFEA00; --color-accent-dark: #ccbb00; --color-warm-white: #FFFDE0; --color-gray: #4a7060; --color-bg: #FFFDE0; --color-surface: #FFFFFF; --color-border: #d4f0c8; --color-border-input:#b8e0b0; --color-border-light:#e8f8e0; --tint-primary: rgba(255, 23, 68, 0.1); --tint-primary-strong:rgba(255, 23, 68, 0.18); --tint-secondary: rgba(0, 230, 118, 0.13); --tint-secondary-soft:rgba(0, 230, 118, 0.08); --tint-accent: rgba(255, 234, 0, 0.2); --tint-navy: rgba(0, 61, 43, 0.08); --color-orange: var(--color-primary); --color-orange-hover:var(--color-primary-hover); --color-teal: var(--color-secondary); --color-teal-dark: var(--color-secondary-dark); --color-amber: var(--color-accent); --color-amber-dark: var(--color-accent-dark); --tint-orange: var(--tint-primary); --tint-orange-strong:var(--tint-primary-strong); --tint-teal: var(--tint-secondary); --tint-teal-soft: var(--tint-secondary-soft); --tint-amber: var(--tint-accent); --text-primary: #003D2B; --text-secondary: #1a5540; --text-muted: #4a7060; --text-on-dark: #FFFDE0; --text-on-dark-muted:#a0d4b8; --text-on-dark-dim: #70b090; --color-hero-bg: #003D2B; --color-hero-bg2: #005540; --hero-orb-color: rgba(0, 230, 118, 0.2); --hero-stripe-color: rgba(255, 23, 68, 0.04); --rgb-secondary: 0, 230, 118; --rgb-accent: 255, 234, 0; --rgb-primary: 255, 23, 68; --rgb-navy: 0, 61, 43; --shadow-sm: 0 1px 2px rgba(0, 61, 43, 0.04); --shadow-md: 0 4px 12px rgba(0, 61, 43, 0.08); --shadow-lg: 0 8px 24px rgba(0, 61, 43, 0.1); --shadow-xl: 0 12px 32px rgba(0, 61, 43, 0.14); --shadow-pill: 0 8px 24px rgba(0, 61, 43, 0.18); --shadow-modal:0 20px 40px rgba(0, 61, 43, 0.4); --shadow-primary-glow:0 12px 32px rgba(255, 23, 68, 0.2); } /* ============================================================ GRAFFITI WALL (Bold) ============================================================ */ [data-theme="graffiti"] { --color-navy: #1A1A1A; --color-navy-light: #2d2d2d; --color-primary: #FF006E; --color-primary-hover:#ff3388; --color-secondary: #3BFF8A; --color-secondary-dark:#18cc60; --color-accent: #FDFF00; --color-accent-dark: #c8cc00; --color-warm-white: #F0EEE8; --color-gray: #666666; --color-bg: #F0EEE8; --color-surface: #FFFFFF; --color-border: #dddbd5; --color-border-input:#cccac4; --color-border-light:#e8e6e0; --tint-primary: rgba(255, 0, 110, 0.1); --tint-primary-strong:rgba(255, 0, 110, 0.18); --tint-secondary: rgba(59, 255, 138, 0.13); --tint-secondary-soft:rgba(59, 255, 138, 0.08); --tint-accent: rgba(253, 255, 0, 0.2); --tint-navy: rgba(26, 26, 26, 0.08); --color-orange: var(--color-primary); --color-orange-hover:var(--color-primary-hover); --color-teal: var(--color-secondary); --color-teal-dark: var(--color-secondary-dark); --color-amber: var(--color-accent); --color-amber-dark: var(--color-accent-dark); --tint-orange: var(--tint-primary); --tint-orange-strong:var(--tint-primary-strong); --tint-teal: var(--tint-secondary); --tint-teal-soft: var(--tint-secondary-soft); --tint-amber: var(--tint-accent); --text-primary: #1A1A1A; --text-secondary: #333333; --text-muted: #666666; --text-on-dark: #FFFFFF; --text-on-dark-muted:#aaaaaa; --text-on-dark-dim: #888888; --color-hero-bg: #1A1A1A; --color-hero-bg2: #2d2d2d; --hero-orb-color: rgba(59, 255, 138, 0.2); --hero-stripe-color: rgba(255, 0, 110, 0.04); --rgb-secondary: 59, 255, 138; --rgb-accent: 253, 255, 0; --rgb-primary: 255, 0, 110; --rgb-navy: 26, 26, 26; --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04); --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.08); --shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.1); --shadow-xl: 0 12px 32px rgba(26, 26, 26, 0.14); --shadow-pill: 0 8px 24px rgba(26, 26, 26, 0.18); --shadow-modal:0 20px 40px rgba(26, 26, 26, 0.4); --shadow-primary-glow:0 12px 32px rgba(255, 0, 110, 0.2); } /* ============================================================ SHARED NON-THEME TOKENS ============================================================ */ :root { /* Social brand colors — intentionally NOT theme-dependent */ --color-whatsapp: #25D366; --color-facebook: #1877F2; --color-instagram: #E1306C; --color-linkedin: #0A66C2; /* Spacing scale (4px base) */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px; /* Border radii */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-default: 10px; --radius-card: 12px; --radius-card-lg: 14px; --radius-hero: 18px; --radius-pill: 100px; --radius-full: 9999px; /* Typography */ --font-sans: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --fs-display: 44px; --fs-h1: 32px; --fs-h2: 26px; --fs-h3: 18px; --fs-h4: 15px; --fs-body:14px; --fs-sm: 13px; --fs-xs: 12px; --fs-2xs: 11px; --fs-3xs: 10px; --fw-regular: 400; --fw-medium: 500; --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Layout */ --max-width-content: 1100px; --max-width-narrow: 760px; --max-width-prose: 720px; /* Transitions */ --transition-fast: 120ms ease-out; --transition-default: 180ms ease-out; --transition-slow: 280ms ease-out; }