/* ============================================
   DAILYFORM DESIGN SYSTEM — Foundations
   Colors, Type, Spacing, Motion
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --df-green:        #1D9E75;  /* Primary, buttons, icons */
  --df-green-light:  #25C490;  /* Accents, gradient tips, logo D */
  --df-green-dark:   #157A5A;  /* Hover/pressed */
  --df-green-7ed:    #7ED9B8;  /* End stop of hero gradient */

  /* Logo gradient stops (tri-stop — green → olive → blue) */
  --df-logo-g1:      #1D9E75;  /* 0%  green */
  --df-logo-g2:      #3B6D11;  /* 50% olive */
  --df-logo-g3:      #185FA5;  /* 100% blue */

  /* Accent dot (on logo + icon) */
  --df-dot-1:        #A7F3D0;
  --df-dot-2:        #6EE7B7;
  --df-dot-deep-1:   #1D9E75;
  --df-dot-deep-2:   #27500A;

  /* cellRESET day colors (domain-specific) */
  --df-day-gruen:    #1D9E75;  /* Green day */
  --df-day-weiss:    #FAFAFA;  /* White day */
  --df-day-rot:      #DC3C3C;  /* Red day */
  --df-day-rot-text: #FF7070;  /* Red day text on dark */

  /* Utility/semantic */
  --df-star:         #F5C542;  /* Wellbeing rating */
  --df-water:        #4DA6FF;  /* Water drop fallback */

  /* ---------- SURFACES (Dark theme — canonical) ---------- */
  --df-bg:           #0F1117;  /* Page / phone screen */
  --df-bg-2:         #161B24;  /* Section bands, cards */
  --df-bg-3:         #1E2433;  /* Inner cards, chips */
  --df-border:       rgba(255,255,255,0.08);
  --df-border-strong:rgba(255,255,255,0.2);

  /* ---------- TEXT ---------- */
  --df-fg:           #F0F4F8;  /* Primary text */
  --df-fg-muted:     #8892A4;  /* Secondary text, captions */
  --df-fg-invert:    #FFFFFF;  /* Text on green */

  /* Tinted surfaces (the accent-glow pattern) */
  --df-tint-green:   rgba(29,158,117,0.15);
  --df-tint-green-border: rgba(29,158,117,0.30);
  --df-tint-green-hover:  rgba(29,158,117,0.40);
  --df-tint-red:     rgba(220,60,60,0.15);
  --df-tint-red-border:   rgba(220,60,60,0.30);
  --df-tint-white:   rgba(250,250,250,0.10);

  /* ---------- GRADIENTS ---------- */
  --df-grad-hero:    linear-gradient(135deg, var(--df-green-light), var(--df-green-7ed));
  --df-grad-logo:    linear-gradient(135deg, #1D9E75 0%, #3B6D11 50%, #185FA5 100%);
  --df-grad-dot:     linear-gradient(135deg, #A7F3D0, #6EE7B7);
  --df-grad-cta:     linear-gradient(135deg, rgba(29,158,117,0.12), rgba(29,158,117,0.04));

  /* ---------- TYPOGRAPHY ---------- */
  --df-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Role-based sizes (clamp = fluid) */
  --df-size-display: clamp(38px, 5vw, 60px);   /* Hero H1 */
  --df-size-h2:      clamp(28px, 3.5vw, 44px); /* Section titles */
  --df-size-h3:      20px;                     /* Step/card titles */
  --df-size-h4:      17px;                     /* Feature cards */
  --df-size-body:    18px;                     /* Lead copy */
  --df-size-ui:      15px;                     /* Buttons, ui */
  --df-size-meta:    14px;                     /* Card copy */
  --df-size-caption: 13px;                     /* Labels */
  --df-size-eyebrow: 12px;                     /* Section labels */

  /* Weights */
  --df-w-regular:    400;
  --df-w-medium:     500;
  --df-w-semibold:   600;
  --df-w-bold:       700;
  --df-w-extrabold:  800;
  --df-w-black:      900;

  /* Line heights */
  --df-lh-tight:     1.1;  /* Display */
  --df-lh-snug:      1.3;
  --df-lh-body:      1.6;
  --df-lh-loose:     1.7;

  /* Letter spacing */
  --df-ls-display:   -1px;   /* H1 */
  --df-ls-h2:        -0.5px; /* H2 */
  --df-ls-eyebrow:   2px;    /* Uppercase labels */
  --df-ls-micro:     0.5px;

  /* ---------- SPACING ---------- */
  --df-sp-1:   4px;
  --df-sp-2:   8px;
  --df-sp-3:   12px;
  --df-sp-4:   16px;
  --df-sp-5:   24px;
  --df-sp-6:   32px;
  --df-sp-7:   48px;
  --df-sp-8:   64px;
  --df-sp-9:   80px;
  --df-sp-10: 100px;

  /* ---------- RADII ---------- */
  --df-radius-sm:    10px;   /* Inner cards */
  --df-radius-md:    12px;   /* Mockup inner cards */
  --df-radius-lg:    16px;   /* Cards, features, steps */
  --df-radius-xl:    28px;   /* Phone screen inner */
  --df-radius-2xl:   36px;   /* Phone bezel */
  --df-radius-pill:  50px;   /* Buttons, pills, badges */

  /* ---------- SHADOWS ---------- */
  --df-shadow-btn:    0 8px 24px rgba(29,158,117,0.40);  /* Primary btn hover */
  --df-shadow-phone:  0 32px 80px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.05);
  --df-shadow-card:   0 4px 12px rgba(0,0,0,0.2);

  /* ---------- MOTION ---------- */
  --df-ease:          ease;
  --df-ease-smooth:   cubic-bezier(.4,0,.2,1);
  --df-dur-fast:      0.2s;    /* Buttons, hovers */
  --df-dur-mid:       0.5s;    /* Fade/slide in */
  --df-dur-float:     4s;      /* Phone float loop */

  /* ---------- LAYOUT ---------- */
  --df-max-w:         1100px;  /* Canonical container */
  --df-nav-blur:      blur(12px);
}

/* ============================================
   SEMANTIC ROLES (apply to tags directly)
   ============================================ */

body {
  font-family: var(--df-font-sans);
  background: var(--df-bg);
  color: var(--df-fg);
  line-height: var(--df-lh-body);
}

h1, .df-h1 {
  font-size: var(--df-size-display);
  font-weight: var(--df-w-black);
  line-height: var(--df-lh-tight);
  letter-spacing: var(--df-ls-display);
}

h2, .df-h2 {
  font-size: var(--df-size-h2);
  font-weight: var(--df-w-extrabold);
  line-height: var(--df-lh-snug);
  letter-spacing: var(--df-ls-h2);
}

h3, .df-h3 {
  font-size: var(--df-size-h3);
  font-weight: var(--df-w-bold);
  line-height: var(--df-lh-snug);
}

.df-h4 {
  font-size: var(--df-size-h4);
  font-weight: var(--df-w-bold);
  line-height: var(--df-lh-snug);
}

.df-lead, p.df-lead {
  font-size: var(--df-size-body);
  color: var(--df-fg-muted);
  line-height: var(--df-lh-loose);
}

.df-body {
  font-size: var(--df-size-meta);
  color: var(--df-fg-muted);
  line-height: var(--df-lh-body);
}

.df-eyebrow {
  font-size: var(--df-size-eyebrow);
  font-weight: var(--df-w-bold);
  letter-spacing: var(--df-ls-eyebrow);
  text-transform: uppercase;
  color: var(--df-green-light);
}

.df-caption {
  font-size: var(--df-size-caption);
  color: var(--df-fg-muted);
}

.df-micro-label {
  font-size: 10px;
  font-weight: var(--df-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--df-ls-micro);
  color: var(--df-fg-muted);
}

.df-gradient-text {
  background: var(--df-grad-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}