/* ===========================================================
   AI Longevity Pro — Design Tokens
   Source of truth: rork-ai-longevity-coach/expo/constants/colors.ts
   =========================================================== */

:root {
  /* ---- Brand: Natural Neutrals (primary family) ---- */
  --alp-primary:        #80755D;   /* olive — primary buttons, brand */
  --alp-primary-light:  #CCBFAE;   /* sandstone — secondary button, muted chip */
  --alp-primary-tint:   #E2DDD5;   /* linen — surfaces, rest states */
  --alp-primary-dark:   #4C4A3A;   /* umber — pressed, headline on tint */
  --alp-secondary:      #0D5C63;   /* heritage teal — retained for Insights, data-viz */

  /* ---- Accent: Coastal Naturals ---- */
  --alp-accent-dune:       #EFE6D6;  /* Dune Whisper — softest tint, card bg */
  --alp-accent-sandstone:  #D9C7A7;  /* Coastal Sandstone — secondary CTA, warm fill */
  --alp-accent-driftwood:  #B8A789;  /* Driftwood Veil — chip active, chart bar */
  --alp-accent-tidal:      #6E6759;  /* Tidal Stone — mid-depth, outlined border */
  --alp-accent-cove:       #3B4148;  /* Cove Shadow — deep pair, headline */

  /* Back-compat aliases (old warm-sand orange retained as legacy) */
  --alp-accent:         #D9C7A7;   /* was #F4A261 — now Coastal Sandstone */
  --alp-accent-light:   #EFE6D6;   /* was #F7B88A — now Dune Whisper */
  --alp-coral:          #B8A789;   /* was #E76F51 — now Driftwood Veil */

  /* ---- Semantic ---- */
  --alp-success:        #4CAF50;
  --alp-warning:        #FF9800;
  --alp-danger:         #EF5350;
  --alp-info:           #4A90D9;

  /* ---- Surfaces (light mode only; app is light-first) ---- */
  --alp-background:         #F8FAFB;  /* screen bg, very cool near-white */
  --alp-surface:            #FFFFFF;  /* cards */
  --alp-surface-secondary:  #F1F5F6;  /* sunken surfaces, chips, empty states */

  /* ---- Text ---- */
  --alp-text:              #1A2B2B;   /* headlines, body */
  --alp-text-secondary:    #5A6B6B;   /* secondary body, labels */
  --alp-text-tertiary:     #8A9A9A;   /* placeholders, tab inactive */
  --alp-text-inverse:      #FFFFFF;   /* on primary / gradient headers */

  /* ---- Borders ---- */
  --alp-border:        #E0E8E8;
  --alp-border-light:  #EEF3F3;

  /* ---- Chart / Data viz ---- */
  --alp-chart-blue:    #4A90D9;
  --alp-chart-green:   #66BB6A;
  --alp-chart-orange:  #FFA726;
  --alp-chart-purple:  #AB47BC;
  --alp-chart-teal:    #26A69A;

  /* ---- Brand gradients ---- */
  --alp-gradient-brand:  linear-gradient(135deg, #0D5C63 0%, #1A7A82 100%);
  --alp-gradient-header: linear-gradient(180deg, #0D5C63 0%, #1A7A82 100%); /* header blocks */
  --alp-gradient-warm:   linear-gradient(90deg, #F4A261 0%, #F7B88A 100%);  /* check-in card */
  --alp-gradient-insight:linear-gradient(90deg, #1E3A5F 0%, #2D5A87 100%);  /* insights cards */
  --alp-gradient-logo:   linear-gradient(135deg, #59C7B5 0%, #7BD389 100%); /* teal→green DNA swirl in logo */

  /* ---- Radii ---- */
  --alp-radius-xs: 6px;    /* chart bars */
  --alp-radius-sm: 8px;    /* pill tags */
  --alp-radius-md: 12px;   /* inputs, icon tiles, small cards */
  --alp-radius-lg: 14px;   /* standard cards, action rows, CTA button */
  --alp-radius-xl: 16px;   /* hero cards, progress cards, check-in */
  --alp-radius-2xl: 20px;  /* icon shield */
  --alp-radius-pill: 9999px;

  /* ---- Spacing (the app uses these almost exclusively) ---- */
  --alp-space-1: 4px;
  --alp-space-2: 8px;
  --alp-space-3: 10px;
  --alp-space-4: 12px;
  --alp-space-5: 14px;
  --alp-space-6: 16px;
  --alp-space-7: 20px;
  --alp-space-8: 24px;
  --alp-space-9: 28px;
  --alp-space-10: 32px;
  --alp-space-12: 40px;

  /* ---- Elevation / shadows (from RN shadowOpacity 0.06–0.3) ---- */
  --alp-shadow-sm:   0 1px 4px rgba(26, 43, 43, 0.06);           /* keypad keys */
  --alp-shadow-md:   0 2px 8px rgba(26, 43, 43, 0.08);           /* cards */
  --alp-shadow-lg:   0 6px 20px rgba(26, 43, 43, 0.10);          /* elevated cards */
  --alp-shadow-brand:0 4px 16px rgba(13, 92, 99, 0.30);          /* shield icon, primary CTA */
  --alp-shadow-accent:0 4px 16px rgba(244, 162, 97, 0.30);       /* accent CTA */

  /* ---- Type ---- */
  --alp-font-sans:    'Inter', -apple-system, BlinkMacSystemFont,
                      'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --alp-font-display: 'Inter', -apple-system, BlinkMacSystemFont,
                      'Segoe UI', Roboto, sans-serif;

  /* Type ramp — matches RN fontSizes found in screens */
  --alp-fs-display: 28px; /* screen title on gradient header */
  --alp-fs-h1:      24px; /* auth title, large % */
  --alp-fs-h2:      18px; /* section title */
  --alp-fs-h3:      17px; /* CTA card title */
  --alp-fs-body-lg: 16px; /* input, primary button text */
  --alp-fs-body:    15px; /* action name, alert title */
  --alp-fs-body-sm: 14px; /* secondary body, labels */
  --alp-fs-caption: 13px; /* subtitles inside cards */
  --alp-fs-micro:   11px; /* tab labels, pill tags */
}

/* ---- Semantic helpers you can apply directly ---- */
.alp-display    { font-family: var(--alp-font-display); font-size: var(--alp-fs-display); font-weight: 700; letter-spacing: -0.01em; color: var(--alp-text); }
.alp-h1         { font-family: var(--alp-font-sans); font-size: var(--alp-fs-h1);  font-weight: 700; color: var(--alp-text); }
.alp-h2         { font-family: var(--alp-font-sans); font-size: var(--alp-fs-h2);  font-weight: 600; color: var(--alp-text); }
.alp-h3         { font-family: var(--alp-font-sans); font-size: var(--alp-fs-h3);  font-weight: 600; color: var(--alp-text); }
.alp-body       { font-family: var(--alp-font-sans); font-size: var(--alp-fs-body); font-weight: 400; color: var(--alp-text); line-height: 1.4; }
.alp-body-sm    { font-family: var(--alp-font-sans); font-size: var(--alp-fs-body-sm); font-weight: 400; color: var(--alp-text-secondary); line-height: 1.45; }
.alp-caption    { font-family: var(--alp-font-sans); font-size: var(--alp-fs-caption); font-weight: 400; color: var(--alp-text-secondary); line-height: 1.4; }
.alp-micro      { font-family: var(--alp-font-sans); font-size: var(--alp-fs-micro); font-weight: 500; color: var(--alp-text-tertiary); letter-spacing: 0.02em; }
.alp-label      { font-family: var(--alp-font-sans); font-size: var(--alp-fs-body-sm); font-weight: 500; color: var(--alp-text-secondary); }

/* ---- Base element styles (opt-in: scope under a .alp-doc) ---- */
.alp-doc { font-family: var(--alp-font-sans); color: var(--alp-text); background: var(--alp-background); }
.alp-doc h1 { font-size: var(--alp-fs-display); font-weight: 700; letter-spacing: -0.01em; }
.alp-doc h2 { font-size: var(--alp-fs-h1); font-weight: 700; }
.alp-doc h3 { font-size: var(--alp-fs-h2); font-weight: 600; }
.alp-doc p  { font-size: var(--alp-fs-body); color: var(--alp-text); line-height: 1.5; }
.alp-doc small { font-size: var(--alp-fs-caption); color: var(--alp-text-secondary); }