/* ============================================================
   Raha Design System — Colors, Type, Spacing, Radii, Shadows
   "Serene Connection" — warm minimalist sanctuary
   Single source of truth derived from:
     - raha/apps/mobile/src/components/foundation/colors.ts
     - raha/apps/mobile/src/components/foundation/typography.ts
     - raha/apps/mobile/src/components/foundation/spacing.ts
     - raha/raha design/raha switch/DESIGN.md
   ============================================================ */

@import url('./fonts.css');

:root {
  /* ---------- BASE COLORS — Earth-tone Sanctuary ---------- */

  /* Primary — Sage Green (growth, harmony, primary actions) */
  --sage:                 #526049;
  --sage-on:              #ffffff;
  --sage-container:       #6a7961;
  --sage-on-container:    #f8ffee;
  --sage-light:           #7a9b6e;   /* pulse-orb middle stop, "med" chart bars */
  --sage-soft:            #eaf0e7;   /* affirmation card fill */
  --sage-soft-border:     #c8d9c2;
  --sage-dark:            #3d4a37;   /* primary hover, pulse-orb dark stop */
  --sage-fixed:           #d8e8cb;
  --sage-fixed-dim:       #bccbb0;
  --sage-tint:            #54634c;

  /* Secondary — Warm Sand (supportive, grounding) */
  --sand:                 #725a41;
  --sand-on:              #ffffff;
  --sand-container:       #ffdcbd;
  --sand-on-container:    #796046;
  --sand-light:           #a68b6b;

  /* Tertiary — Muted Clay (emotional resonance) */
  --clay:                 #7e5139;
  --clay-on:              #ffffff;
  --clay-container:       #9a6950;
  --clay-on-container:    #fffbff;
  --clay-light:           #b87e60;

  /* ---------- SURFACE — Linen & Stone ---------- */

  --linen:                #fbf9f4;   /* app background, never pure white */
  --surface:              #fbf9f4;
  --surface-dim:          #dbdad5;
  --surface-bright:       #fbf9f4;
  --surface-variant:      #e4e2dd;
  --surface-container-lowest:  #ffffff;   /* card fills — only place white appears */
  --surface-container-low:     #f5f3ee;
  --surface-container:         #f0eee9;
  --surface-container-high:    #eae8e3;
  --surface-container-highest: #e4e2dd;

  /* Legacy alias used in canonical mockup */
  --raha-soft:            #eceae3;   /* small tile background behind ritual emoji */

  /* ---------- TEXT — Stone ---------- */

  --on-surface:           #1b1c19;   /* primary text — warm near-black */
  --on-surface-variant:   #444841;   /* secondary text */
  --inverse-surface:      #30312e;
  --inverse-on-surface:   #f2f1ec;
  --inverse-primary:      #bccbb0;

  /* ---------- OUTLINE — Hairlines ---------- */

  --outline:              #757870;   /* stone — muted text / icon */
  --outline-variant:      #c5c8be;   /* 0.5px hairline dividers */

  /* ---------- SEMANTIC — Rarely surfaced; Raha prefers tonal affirmation ---------- */

  --success:              #4caf50;
  --success-light:        #e8f5e9;
  --success-dark:         #2e7d32;
  --warning:              #ff9800;
  --warning-light:        #fff3e0;
  --warning-dark:         #e65100;
  --error:                #ba1a1a;
  --error-on:             #ffffff;
  --error-light:          #ffdad6;
  --error-dark:           #93000a;
  --info:                 #2196f3;
  --info-light:           #e3f2fd;
  --info-dark:            #1565c0;

  /* ---------- CATEGORY COLORS (Shared Care rings) ---------- */

  --cat-housing:          var(--sage);
  --cat-food:             var(--sand);
  --cat-experiences:      var(--clay);
  --cat-savings:          var(--sage);
  --cat-personal:         #8fa882;       /* light sage */
  --cat-health:           var(--sage);
  --cat-intimacy:         var(--sand);
  --cat-finance:          var(--clay);
  --cat-other:            var(--outline);

  /* ---------- TYPOGRAPHY ---------- */

  --font-serif:           'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-sans:            'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;

  /* Semantic type tokens — use these, not raw sizes */
  /* H1 / H2 / H3 = Noto Serif (editorial titles) */
  --type-h1-family:       var(--font-serif);
  --type-h1-size:         40px;
  --type-h1-line:         1.2;
  --type-h1-weight:       400;
  --type-h1-tracking:     -0.02em;

  --type-h2-family:       var(--font-serif);
  --type-h2-size:         32px;
  --type-h2-line:         1.3;
  --type-h2-weight:       400;
  --type-h2-tracking:     0;

  --type-h3-family:       var(--font-serif);
  --type-h3-size:         24px;
  --type-h3-line:         1.4;
  --type-h3-weight:       400;
  --type-h3-tracking:     0;

  /* Display number (hero numerics like "₨ 4,200" or "7h 20m") */
  --type-display-num-family: var(--font-serif);
  --type-display-num-size:   28px;
  --type-display-num-weight: 400;

  /* Title — sans, screen subtitles */
  --type-title-family:    var(--font-sans);
  --type-title-size:      22px;
  --type-title-line:      1.27;
  --type-title-weight:    600;

  /* Body — Plus Jakarta Sans */
  --type-body-lg-family:  var(--font-sans);
  --type-body-lg-size:    18px;
  --type-body-lg-line:    1.6;
  --type-body-lg-weight:  400;

  --type-body-md-family:  var(--font-sans);
  --type-body-md-size:    16px;
  --type-body-md-line:    1.6;
  --type-body-md-weight:  400;

  --type-body-sm-family:  var(--font-sans);
  --type-body-sm-size:    14px;
  --type-body-sm-line:    1.43;
  --type-body-sm-weight:  400;

  /* Label — for buttons, chips, small UI */
  --type-label-lg-family: var(--font-sans);
  --type-label-lg-size:   14px;
  --type-label-lg-line:   1.43;
  --type-label-lg-weight: 600;
  --type-label-lg-tracking: 0.01em;

  --type-label-md-family: var(--font-sans);
  --type-label-md-size:   13px;
  --type-label-md-line:   1.23;
  --type-label-md-weight: 500;

  /* Label caps — SIGNATURE: lowercase, wide-tracked card titles */
  --type-label-caps-family:   var(--font-sans);
  --type-label-caps-size:     12px;
  --type-label-caps-line:     1;
  --type-label-caps-weight:   600;
  --type-label-caps-tracking: 0.08em;
  --type-label-caps-case:     lowercase;

  --type-overline-family:   var(--font-sans);
  --type-overline-size:     11px;
  --type-overline-line:     1.45;
  --type-overline-weight:   500;
  --type-overline-tracking: 0;

  /* ---------- SPACING (8px base unit) ---------- */

  --space-unit:           8px;
  --space-xs:             4px;     /* 0.5× */
  --space-sm:             12px;    /* 1.5× tight */
  --space-md:             16px;    /* 2× standard */
  --space-lg:             24px;    /* 3× comfortable */
  --space-xl:             32px;    /* 4× large */
  --space-xxl:            48px;    /* 6× section gap */
  --space-xxxl:           64px;

  --screen-margin:        20px;    /* mobile side margin */
  --screen-gutter:        16px;    /* between cards */
  --section-gap:          48px;
  --stack-sm:             8px;
  --stack-md:             16px;
  --stack-lg:             32px;

  /* ---------- RADII (everything is rounded — no 90° angles) ---------- */

  --radius-sm:            4px;     /* 0.25rem */
  --radius-default:       8px;     /* 0.5rem */
  --radius-md:            12px;    /* 0.75rem */
  --radius-lg:            16px;    /* 1rem — cards */
  --radius-xl:            24px;    /* 1.5rem — hero cards / pill button */
  --radius-pill:          9999px;  /* buttons, chips, badges, FABs */
  --radius-circle:        9999px;  /* avatars */

  /* ---------- SHADOWS — sage-tinted, never pure black ---------- */

  --shadow-none:          0 0 0 transparent;
  --shadow-sm:            0 2px 8px  rgba(82, 96, 73, 0.08);   /* Level 1 — cards */
  --shadow-md:            0 4px 12px rgba(82, 96, 73, 0.10);   /* Level 1 — standard */
  --shadow-lg:            0 6px 16px rgba(82, 96, 73, 0.12);   /* Level 2 — elevated */
  --shadow-xl:            0 8px 24px rgba(82, 96, 73, 0.15);   /* Level 3 — modals */

  /* Sage-glow focus ring (replaces browser blue outline) */
  --focus-ring:           0 0 0 3px rgba(82, 96, 73, 0.20);

  /* ---------- BORDERS ---------- */

  --hairline:             0.5px solid var(--outline-variant);
  --hairline-strong:      1px solid var(--outline-variant);
  --outline-1:            1px solid var(--outline);
  --button-outline:       1.5px solid currentColor;

  /* ---------- MOTION ---------- */

  --motion-fast:          150ms;
  --motion-normal:        200ms;
  --motion-slow:          300ms;
  --motion-slower:        500ms;
  --easing-default:       cubic-bezier(0.4, 0, 0.2, 1);
  --easing-out:           cubic-bezier(0, 0, 0.2, 1);
  --easing-spring:        cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Default press-scale */
  --press-scale:          0.96;
}

/* ============================================================
   Semantic element styles — use directly without classnames
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--on-surface);
  background: var(--linen);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--type-h1-family);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-tracking);
  color: var(--on-surface);
  margin: 0;
}

h2 {
  font-family: var(--type-h2-family);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--type-h2-weight);
  color: var(--on-surface);
  margin: 0;
}

h3 {
  font-family: var(--type-h3-family);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--type-h3-weight);
  color: var(--on-surface);
  margin: 0;
}

p {
  font-family: var(--type-body-md-family);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--on-surface);
  margin: 0;
}

small {
  font-family: var(--type-body-sm-family);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--on-surface-variant);
}

/* Signature card label — lowercase wide-tracked */
.card-label {
  font-family: var(--type-label-caps-family);
  font-size: var(--type-label-caps-size);
  line-height: var(--type-label-caps-line);
  font-weight: var(--type-label-caps-weight);
  letter-spacing: var(--type-label-caps-tracking);
  text-transform: var(--type-label-caps-case);
  color: var(--outline);
}

code, .mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--surface-container);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--on-surface);
}

/* Focus ring (replaces browser default blue) */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-default);
}