/*
 * Selah — Design Tokens
 *
 * Extracted from mockup-pulse.png, mockup-role.png, mockup-stones.png,
 * mockup-week.png, and mockup-sabbath.png.
 *
 * All future components inherit from these custom properties.
 * No component framework — this IS the design system.
 */

:root {
  /* ── Color Palette ─────────────────────────────────────── */

  /* Backgrounds */
  --color-bg:              #F5F0EA;
  --color-bg-warm:         #EDE7DF;
  --color-surface:         #FFFFFF;
  --color-surface-muted:   #F9F6F2;

  /* Text */
  --color-text-primary:    #3B3330;
  --color-text-secondary:  #8A8279;
  --color-text-tertiary:   #B5AFA8;
  --color-text-inverse:    #FFFFFF;

  /* Accent — warm gold seen in active tabs, role rings, buttons */
  --color-accent:          #B5A36A;
  --color-accent-light:    #D4C89A;
  --color-accent-faint:    #EDE5D0;

  /* Borders & dividers */
  --color-border:          #E5DDD5;
  --color-border-strong:   #D0C8BE;

  /* Role colors — from the dots and accents in weekly/pulse views */
  --color-role-faith:      #C4A050;
  --color-role-husband:    #C07858;
  --color-role-father:     #4A7C59;
  --color-role-athlete:    #6B8FA3;
  --color-role-builder:    #8B7D45;
  --color-role-provider:   #5A8C8C;

  /* Project type accents — Builder / Provider distinction */
  --color-project-builder:  #6B5744;   /* Earth brown */
  --color-project-provider: #5E7C8A;   /* Muted blue */

  /* Semantic states */
  --color-success:         #4A7C59;
  --color-warning:         #C4A050;
  --color-error:           #C07858;

  /* ── Typography ────────────────────────────────────────── */

  /* Font families */
  --font-heading:          'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                           Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:             'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font sizes — modular scale (base 16px, ratio ~1.25) */
  --text-xs:               0.75rem;   /* 12px */
  --text-sm:               0.875rem;  /* 14px */
  --text-base:             1rem;      /* 16px */
  --text-lg:               1.125rem;  /* 18px */
  --text-xl:               1.25rem;   /* 20px */
  --text-2xl:              1.5rem;    /* 24px */
  --text-3xl:              1.875rem;  /* 30px */
  --text-4xl:              2.25rem;   /* 36px */

  /* Font weights */
  --weight-normal:         400;
  --weight-medium:         500;
  --weight-semibold:       600;
  --weight-bold:           700;

  /* Line heights */
  --leading-tight:         1.2;
  --leading-snug:          1.35;
  --leading-normal:        1.5;
  --leading-relaxed:       1.65;

  /* Letter spacing */
  --tracking-tight:        -0.02em;
  --tracking-normal:       0;
  --tracking-wide:         0.06em;
  --tracking-wider:        0.1em;

  /* ── Spacing Scale ─────────────────────────────────────── */
  /* 4px base unit */
  --space-0:               0;
  --space-1:               0.25rem;   /*  4px */
  --space-2:               0.5rem;    /*  8px */
  --space-3:               0.75rem;   /* 12px */
  --space-4:               1rem;      /* 16px */
  --space-5:               1.25rem;   /* 20px */
  --space-6:               1.5rem;    /* 24px */
  --space-8:               2rem;      /* 32px */
  --space-10:              2.5rem;    /* 40px */
  --space-12:              3rem;      /* 48px */
  --space-16:              4rem;      /* 64px */
  --space-20:              5rem;      /* 80px */

  /* Named spacing aliases for layout intent */
  --space-page-x:          var(--space-5);    /* horizontal page padding */
  --space-page-y:          var(--space-6);    /* vertical page padding */
  --space-section-gap:     var(--space-8);    /* between major sections */
  --space-card-padding:    var(--space-5);    /* inside cards */

  /* ── Border Radii ──────────────────────────────────────── */
  --radius-sm:             0.5rem;    /*  8px */
  --radius-md:             0.75rem;   /* 12px */
  --radius-lg:             1rem;      /* 16px */
  --radius-xl:             1.5rem;    /* 24px */
  --radius-full:           9999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:             0 1px 2px rgba(59, 51, 48, 0.04);
  --shadow-md:             0 2px 8px rgba(59, 51, 48, 0.06);
  --shadow-lg:             0 4px 16px rgba(59, 51, 48, 0.08);

  /* ── Transitions ───────────────────────────────────────── */
  --ease-default:          cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:         150ms;
  --duration-normal:       250ms;
  --duration-slow:         400ms;

  /* ── Z-index Scale ─────────────────────────────────────── */
  --z-base:                0;
  --z-elevated:            10;
  --z-nav:                 100;
  --z-modal:               200;
  --z-toast:               300;

  /* ── Layout ────────────────────────────────────────────── */
  --max-width-app:         430px;    /* phone viewport cap */
  --nav-height:            3.5rem;   /* 56px bottom tab bar */
  --safe-area-bottom:      env(safe-area-inset-bottom, 0px);
  --safe-area-top:         env(safe-area-inset-top, 0px);
}