/* Colour Within — Foundations
   Sources: ColourWithin/ColourWithin/Views/Shared/AppTheme.swift (canonical)
   Brand values reference cream paper, warm stone, soft wood — never clinical.
   Web canonical fonts: Georgia (serif) + Nunito (rounded).
*/

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


/* ───────────────────────────────────────────────
   COLOR — Light Mode (default)
   ─────────────────────────────────────────────── */
:root {
  /* Neutrals */
  --cw-canvas:        #FAF8F5;   /* primary background */
  --cw-grouped:       #F4EFE9;   /* grouped/section background */
  --cw-card:          rgba(255, 255, 255, 0.9);
  --cw-card-solid:    #FFFFFF;
  --cw-card-border:   #E9E2D9;
  --cw-accent-soft:   #F0ECE7;   /* hover, tracks, secondary card */

  /* Text — values per Brand Identity Guide v1.0 (April 2026).
     Note: tertiary #A0958B fails WCAG AA against cream at body sizes;
     reserve it for hints, timestamps, and other glanceable metadata
     (≥14px, medium weight) — never long-form body copy. */
  --cw-text-primary:    #322B25;
  --cw-text-secondary:  #7C7269;
  --cw-text-tertiary:   #A0958B;

  /* Accent (functional UI: buttons, active states) */
  --cw-accent:           #3A3530;
  --cw-accent-fg:        #FFFFFF;
  --cw-badge-fg:         #322B25;

  /* Expressive accents — punctuate, never dominate */
  --cw-success:    #AFE06D;   /* completion, Daily badge */
  --cw-sky:        #AFD1E8;   /* background orb, CTA badge fill */
  --cw-rose:       #E28BDF;   /* progress text, background orb */
  --cw-amber:      #DFA142;   /* warnings, Today badge fill */

  /* Component-level */
  --cw-cta-badge-fill:     var(--cw-sky);
  --cw-today-badge-fill:   var(--cw-amber);

  /* Shadows — soft, low-contrast, like pencil marks */
  --cw-shadow-card:     0 10px 18px rgba(0, 0, 0, 0.04);
  --cw-shadow-card-lg:  0 8px 32px rgba(0, 0, 0, 0.08);

  /* Radii — generous and continuous (iOS .continuous style) */
  --cw-r-pill:    9999px;
  --cw-r-card:    24px;        /* gallery cards */
  --cw-r-card-lg: 28px;        /* large empty-state / hero cards */
  --cw-r-card-sm: 20px;        /* smaller info cards */
  --cw-r-banner:  16px;
  --cw-r-thumb:   8px;

  /* Spacing scale (matches iOS literal pads) */
  --cw-s-1:  4px;
  --cw-s-2:  8px;
  --cw-s-3:  12px;
  --cw-s-4:  16px;
  --cw-s-5:  20px;
  --cw-s-6:  24px;
  --cw-s-7:  28px;
  --cw-s-8:  32px;
  --cw-s-9:  36px;
  --cw-s-10: 48px;

  /* Touch target floor */
  --cw-touch-min: 44px;

  /* Type families (mirror SwiftUI .system designs) */
  --cw-font-serif:   Georgia, "New York", "Iowan Old Style", "Source Serif Pro", "Times New Roman", serif;
  --cw-font-rounded: "Nunito", ui-rounded, "SF Pro Rounded", "Quicksand", -apple-system, "Helvetica Neue", sans-serif;
  --cw-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ───────────────────────────────────────────────
   COLOR — Dark Mode
   Warm lamplight, never clinical. Pure black avoided.
   ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --cw-canvas:        #1C1A18;
    --cw-grouped:       #24221F;
    --cw-card:          rgba(44, 41, 37, 0.9);
    --cw-card-solid:    #2C2925;
    --cw-card-border:   #3A3631;
    --cw-accent-soft:   #302C28;

    --cw-text-primary:    #EBE6E1;
    --cw-text-secondary:  #A59D94;
    --cw-text-tertiary:   #78716A;

    --cw-accent:        #DED9D4;
    --cw-accent-fg:     #1C1A18;
    --cw-badge-fg:      #FAF8F5;

    --cw-success:  #94C452;
    --cw-sky:      #699BC3;
    --cw-rose:     #B969B6;
    --cw-amber:    #CD943A;

    --cw-cta-badge-fill:    #38628458;
    --cw-today-badge-fill:  #7C531B;

    --cw-shadow-card:    0 10px 18px rgba(0, 0, 0, 0.30);
    --cw-shadow-card-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
  }
}

/* Class-based dark override for in-page toggling */
.cw-dark {
  --cw-canvas:        #1C1A18;
  --cw-grouped:       #24221F;
  --cw-card:          rgba(44, 41, 37, 0.9);
  --cw-card-solid:    #2C2925;
  --cw-card-border:   #3A3631;
  --cw-accent-soft:   #302C28;
  --cw-text-primary:    #EBE6E1;
  --cw-text-secondary:  #A59D94;
  --cw-text-tertiary:   #78716A;
  --cw-accent:        #DED9D4;
  --cw-accent-fg:     #1C1A18;
  --cw-badge-fg:      #FAF8F5;
  --cw-success:  #94C452;
  --cw-sky:      #699BC3;
  --cw-rose:     #B969B6;
  --cw-amber:    #CD943A;
  --cw-cta-badge-fill:    #38628458;
  --cw-today-badge-fill:  #7C531B;
  --cw-shadow-card:    0 10px 18px rgba(0, 0, 0, 0.30);
  --cw-shadow-card-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* ───────────────────────────────────────────────
   TYPOGRAPHY — semantic roles
   AppTheme.swift mapping:
     titleFont   → serif, regular   (headings, hero titles)
     sectionFont → rounded, semibold (section headers, big labels)
     bodyFont    → rounded, regular  (body, captions, dates)
     labelFont   → rounded, medium   (buttons, chips, badges)
   ─────────────────────────────────────────────── */
.cw-title-xl { font-family: var(--cw-font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; color: var(--cw-text-primary); }
.cw-title-l  { font-family: var(--cw-font-serif); font-weight: 400; font-size: 28px; line-height: 1.18; letter-spacing: -0.01em; color: var(--cw-text-primary); }
.cw-title-m  { font-family: var(--cw-font-serif); font-weight: 400; font-size: 22px; line-height: 1.22; color: var(--cw-text-primary); }
.cw-title-s  { font-family: var(--cw-font-serif); font-weight: 400; font-size: 20px; line-height: 1.25; color: var(--cw-text-primary); }

.cw-section  { font-family: var(--cw-font-rounded); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--cw-text-primary); }
.cw-section-s{ font-family: var(--cw-font-rounded); font-weight: 600; font-size: 16px; line-height: 1.3;  color: var(--cw-text-primary); }

.cw-body     { font-family: var(--cw-font-rounded); font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--cw-text-primary); }
.cw-body-s   { font-family: var(--cw-font-rounded); font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--cw-text-secondary); }
.cw-caption  { font-family: var(--cw-font-rounded); font-weight: 400; font-size: 12px; line-height: 1.4;  color: var(--cw-text-secondary); }

.cw-label    { font-family: var(--cw-font-rounded); font-weight: 500; font-size: 15px; line-height: 1.25; color: var(--cw-text-primary); }
.cw-label-s  { font-family: var(--cw-font-rounded); font-weight: 500; font-size: 13px; line-height: 1.2;  color: var(--cw-text-primary); }
.cw-label-xs { font-family: var(--cw-font-rounded); font-weight: 500; font-size: 12px; line-height: 1.2;  color: var(--cw-text-primary); }

/* ───────────────────────────────────────────────
   PRIMITIVES
   ─────────────────────────────────────────────── */
.cw-screen-bg {
  background:
    radial-gradient(420px 420px at 12% 18%, color-mix(in oklab, var(--cw-sky) 12%, transparent), transparent 70%),
    radial-gradient(360px 360px at 88% 82%, color-mix(in oklab, var(--cw-rose) 8%,  transparent), transparent 70%),
    linear-gradient(135deg, var(--cw-canvas), color-mix(in oklab, var(--cw-grouped) 85%, var(--cw-canvas)) 50%, var(--cw-canvas));
  background-color: var(--cw-canvas);
}

.cw-card {
  background: var(--cw-card);
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-r-card);
  box-shadow: var(--cw-shadow-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cw-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--cw-r-pill);
  padding: 10px 18px;
  background: var(--cw-card-solid);
  border: 1px solid var(--cw-card-border);
  color: var(--cw-text-primary);
}

.cw-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border-radius: var(--cw-r-pill);
  background: var(--cw-accent);
  color: var(--cw-accent-fg);
  border: none;
  font-family: var(--cw-font-rounded); font-weight: 500; font-size: 16px;
  cursor: pointer; transition: opacity .15s ease, transform .15s ease;
}
.cw-btn-primary:hover  { opacity: 0.92; }
.cw-btn-primary:active { transform: scale(0.98); }

.cw-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
  border-radius: var(--cw-r-pill);
  background: var(--cw-accent-soft);
  color: var(--cw-text-primary);
  border: 1px solid var(--cw-card-border);
  font-family: var(--cw-font-rounded); font-weight: 500; font-size: 14px;
  cursor: pointer; transition: opacity .15s ease, transform .15s ease;
}
.cw-btn-secondary:hover  { background: color-mix(in oklab, var(--cw-accent-soft) 70%, var(--cw-card-border)); }
.cw-btn-secondary:active { transform: scale(0.98); }