/* style.css — Design Tokens & Component Styles for Dr. Chris Lakhiani */

/* ============================================
   TYPE SCALE (fluid with clamp)
   ============================================ */
:root {
  --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.9rem  + 0.5vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  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,    8rem);

  /* FONTS */
  --font-display: 'Sentient', 'Georgia', serif;
  --font-body: 'General Sans', 'Helvetica Neue', sans-serif;

  /* 4px SPACING SYSTEM */
  --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 */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* TRANSITIONS */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* CONTENT WIDTHS */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;
}

/* ============================================
   LIGHT MODE — Warm cream/teal palette
   ============================================ */
:root, [data-theme="light"] {
  /* Surfaces — warm cream progression */
  --color-bg:               #FAF8F5;
  --color-surface:          #F5F2ED;
  --color-surface-2:        #EFECE6;
  --color-surface-offset:   #E8E4DD;
  --color-surface-offset-2: #E0DCD4;
  --color-surface-dynamic:  #D8D3CA;
  --color-divider:          #D0CBC2;
  --color-border:           #C8C2B8;

  /* Text — warm dark */
  --color-text:          #2B2722;
  --color-text-muted:    #6B665E;
  --color-text-faint:    #A9A49C;
  --color-text-inverse:  #FAF8F5;

  /* Primary — warm teal-green */
  --color-primary:        #2A7F62;
  --color-primary-hover:  #1F6A50;
  --color-primary-active: #175440;
  --color-primary-highlight: #D4E8DF;

  /* Error */
  --color-error:          #A13544;
  --color-error-hover:    #8A2C3A;
  --color-error-active:   #702330;
  --color-error-highlight: #E8D4D8;

  /* Success */
  --color-success:        #3D7A2E;
  --color-success-hover:  #2D5C1E;
  --color-success-active: #1E3F14;
  --color-success-highlight: #D4E0CC;

  /* Warning */
  --color-warning:        #96421A;
  --color-warning-hover:  #7A3514;
  --color-warning-active: #5E2810;
  --color-warning-highlight: #E2D4C8;

  /* Shadows (warm-tinted) */
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 70 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.02 70 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.02 70 / 0.12);
}

/* ============================================
   DARK MODE — warm dark
   ============================================ */
[data-theme="dark"] {
  --color-bg:               #1A1816;
  --color-surface:          #211F1C;
  --color-surface-2:        #282522;
  --color-surface-offset:   #2F2C28;
  --color-surface-offset-2: #36332E;
  --color-surface-dynamic:  #3D3A34;
  --color-divider:          #3A3732;
  --color-border:           #4A4740;

  --color-text:          #E0DDD8;
  --color-text-muted:    #8F8B84;
  --color-text-faint:    #5E5A54;
  --color-text-inverse:  #1A1816;

  --color-primary:        #4FAF8A;
  --color-primary-hover:  #3D9B78;
  --color-primary-active: #2D8766;
  --color-primary-highlight: #2A3832;

  --color-error:          #D47080;
  --color-error-hover:    #C45A6A;
  --color-error-active:   #B44454;
  --color-error-highlight: #3E2E32;

  --color-success:        #6AAA4A;
  --color-success-hover:  #558F38;
  --color-success-active: #407428;
  --color-success-highlight: #2E3A28;

  --color-warning:        #C06A3A;
  --color-warning-hover:  #AA5A2E;
  --color-warning-active: #944A22;
  --color-warning-highlight: #3A302A;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:               #1A1816;
    --color-surface:          #211F1C;
    --color-surface-2:        #282522;
    --color-surface-offset:   #2F2C28;
    --color-surface-offset-2: #36332E;
    --color-surface-dynamic:  #3D3A34;
    --color-divider:          #3A3732;
    --color-border:           #4A4740;

    --color-text:          #E0DDD8;
    --color-text-muted:    #8F8B84;
    --color-text-faint:    #5E5A54;
    --color-text-inverse:  #1A1816;

    --color-primary:        #4FAF8A;
    --color-primary-hover:  #3D9B78;
    --color-primary-active: #2D8766;
    --color-primary-highlight: #2A3832;

    --color-error:          #D47080;
    --color-error-hover:    #C45A6A;
    --color-error-active:   #B44454;
    --color-error-highlight: #3E2E32;

    --color-success:        #6AAA4A;
    --color-success-hover:  #558F38;
    --color-success-active: #407428;
    --color-success-highlight: #2E3A28;

    --color-warning:        #C06A3A;
    --color-warning-hover:  #AA5A2E;
    --color-warning-active: #944A22;
    --color-warning-highlight: #3A302A;

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
  }
}