/* Plannly design tokens. 1px in mockups = 1pt on device. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nunito:wght@700;800;900&display=swap");

:root {
  color-scheme: light dark;

  /* Surfaces */
  --bg: #F6F5F1;            /* app background, warm paper */
  --surface: #FFFFFF;       /* cards, sheets, grouped rows */
  --surface-2: #EFEDE7;     /* fills: chips, segmented track, wells */
  --surface-3: #E4E2DB;     /* pressed fill, skeleton base */
  --elevated: #FFFFFF;      /* menus, popovers, toasts on light */
  --scrim: rgba(20, 19, 28, 0.32);
  --line: #E4E2DB;          /* hairline separators */
  --line-strong: #CFCCC4;

  /* Text */
  --ink: #1B1A21;           /* primary text 15.8:1 on --bg */
  --ink-2: #6B6975;         /* secondary text 4.9:1 on --bg, 5.4:1 on --surface */
  --ink-3: #8E8C98;         /* placeholders, decorative glyphs, control outlines (3.0:1 on --bg), never body text */
  --ink-2-tint: #5A5864;    /* secondary text on task tints >= 5.7:1 */
  --ink-inverse: #FFFFFF;
  --control-off: #8E8C98;   /* outline of off toggles, empty radios and checkboxes >= 3:1 */

  /* Brand */
  --accent: #5552D9;        /* Iris: buttons, links, selection. White text 5.8:1 */
  --accent-pressed: #4542C4;
  --on-accent: #FFFFFF;
  --accent-soft: #ECEBFF;   /* tinted fills, selected cards */
  --accent-ink: #4542C4;    /* accent text on --accent-soft 6.1:1 */
  --warm: #FF9F5A;          /* Apricot: brand dot, celebration, Pro glow (decorative) */
  --warm-ink: #B95009;      /* apricot as text 4.6:1 on white */
  --warm-card-a: #FFF1E4; --warm-card-b: #FFE6D2; --warm-card-ink: #5A4A3E;
  --launch-bg: #5552D9;     /* LaunchBackground, equals splash first frame */

  /* Pro: gradient under white text stays >= 5.3:1 at every stop; apricot glow is decorative only, never under text */
  --pro-a: #5552D9;         /* white 5.8:1 */
  --pro-b: #4A47C9;         /* white 6.9:1 */
  --pro-c: #7D4CD8;         /* white 5.4:1 */
  --pro-glow: #FF9F5A;      /* sparkle, hero glow, particles */
  --on-pro: #FFFFFF;
  --pro-gradient: linear-gradient(110deg, var(--pro-a) 0%, var(--pro-b) 55%, var(--pro-c) 100%);

  /* Status */
  --now: #E8590C;           /* now line (graphic, 3.6:1) */
  --now-ink: #C2410C;       /* "Now" label fill and text 5.2:1 */
  --on-now: #FFFFFF;        /* text on --now-ink fill 5.2:1 */
  --success: #13804A;
  --success-soft: #E2F3EA;
  --success-ink: #0F7040;   /* success text on --success-soft 5.4:1 */
  --danger: #B42318;
  --danger-fill: #B42318;   /* solid destructive fills under white text 6.6:1 (both modes) */
  --danger-soft: #FCE8E6;
  --warning-ink: #8A5A00;
  --warning-soft: #FFF3D6;

  /* Calendar events (read-only blocks) */
  --event-fill: rgba(90, 98, 113, 0.10);
  --event-stripe: #5A6271;

  /* Task palette: solid (icon circle, stripe, white glyph >= 4.4:1) and tint (block fill, ink text >= 12:1) */
  --t-coral: #D23C3C;   --t-coral-tint: #F9E6E6;
  --t-apricot: #B95009; --t-apricot-tint: #F6E8DF;
  --t-sun: #A16A0E;     --t-sun-tint: #F3ECE0;
  --t-lime: #4F7D19;    --t-lime-tint: #E8EEE1;
  --t-mint: #12805C;    --t-mint-tint: #E0EEEA;
  --t-teal: #0B7480;    --t-teal-tint: #DFEDEE;
  --t-sky: #1A6FB5;     --t-sky-tint: #E1ECF5;
  --t-blue: #3D57D1;    --t-blue-tint: #E6E9F9;
  --t-iris: #5552D9;    --t-iris-tint: #E9E9FA;
  --t-grape: #8540C2;   --t-grape-tint: #EFE6F7;
  --t-rose: #C2366F;    --t-rose-tint: #F7E5EC;
  --t-slate: #5A6271;   --t-slate-tint: #EAEBED;

  /* Accent themes [Pro except Plannly]: accent in light / accent in dark */
  --theme-plannly: #5552D9;  --theme-plannly-dark: #9A99FF;
  --theme-ocean: #0B6FA4;    --theme-ocean-dark: #5CC3F2;
  --theme-forest: #2F7A3C;   --theme-forest-dark: #7FD08B;
  --theme-sunset: #C2410C;   --theme-sunset-dark: #FF9A62;
  --theme-lavender: #7C4DCC; --theme-lavender-dark: #C4A8FF;
  --theme-graphite: #3F4450; --theme-graphite-dark: #C9CDD6;
  --theme-sakura: #C2366F;   --theme-sakura-dark: #FF9EC4;
  --theme-mint: #0F7F6B;     --theme-mint-dark: #5EE0C4;
  --theme-sand: #8A6418;     --theme-sand-dark: #E8C27A;
  --theme-midnight: #2B3A8C; --theme-midnight-dark: #93A4FF;

  /* Typography: SF Pro / SF Pro Rounded on device (Dynamic Type, Large = default). Inter and Nunito stand in for mockups. */
  --font-text: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, "Inter", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --fs-large-title: 34px; --lh-large-title: 41px;   /* .largeTitle bold rounded */
  --fs-title1: 28px;      --lh-title1: 34px;        /* .title bold rounded */
  --fs-title2: 22px;      --lh-title2: 28px;        /* .title2 bold rounded */
  --fs-title3: 20px;      --lh-title3: 25px;        /* .title3 semibold */
  --fs-headline: 17px;    --lh-headline: 22px;      /* .headline semibold */
  --fs-body: 17px;        --lh-body: 22px;          /* .body */
  --fs-callout: 16px;     --lh-callout: 21px;       /* .callout */
  --fs-subhead: 15px;     --lh-subhead: 20px;       /* .subheadline */
  --fs-footnote: 13px;    --lh-footnote: 18px;      /* .footnote */
  --fs-caption: 12px;     --lh-caption: 16px;       /* .caption */
  --fs-caption2: 11px;    --lh-caption2: 13px;      /* .caption2, minimum */
  --fs-hero-number: 48px; /* summary ring percent, rounded heavy, monospaced digits */

  /* Radii (continuous corners on device) */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-sheet: 34px; --r-pill: 999px;

  /* Spacing (4pt grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --margin: 16px;           /* screen side margin, compact width */
  --margin-regular: 24px;   /* regular width */
  --tap: 44px;              /* minimum touch target */

  /* Timeline */
  --hour-compact: 60px; --hour-normal: 90px; --hour-roomy: 120px;
  --time-gutter: 52px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(27, 26, 33, 0.05), 0 1px 1px rgba(27, 26, 33, 0.03);
  --shadow-2: 0 4px 14px rgba(27, 26, 33, 0.07), 0 1px 3px rgba(27, 26, 33, 0.05);
  --shadow-3: 0 14px 40px rgba(27, 26, 33, 0.14), 0 3px 10px rgba(27, 26, 33, 0.07);
  --shadow-lift: 0 18px 36px rgba(27, 26, 33, 0.18), 0 4px 10px rgba(27, 26, 33, 0.08);
  --material: rgba(255, 255, 255, 0.78);   /* .regularMaterial stand-in; opaque --surface with Reduce Transparency */
  --blur: saturate(180%) blur(20px);

  /* Motion (mirrors Motion.swift) */
  --d-instant: 120ms; --d-fast: 200ms; --d-base: 320ms; --d-slow: 500ms; --d-hero: 1200ms;
  --ease-out: cubic-bezier(0.20, 0.75, 0.34, 0.94);
  --ease-settle: cubic-bezier(0.00, 0.65, 0.51, 0.99);
  --ease-inout: cubic-bezier(0.65, 0.00, 0.35, 1.00);
  --ease-exit: cubic-bezier(0.60, 0.02, 0.80, 0.42);
  --stagger: 60ms;
  --seg-on: var(--surface);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121218;
    --surface: #1C1C24;
    --surface-2: #26262F;
    --surface-3: #31313B;
    --elevated: #2A2A34;
    --scrim: rgba(0, 0, 0, 0.55);
    --line: #2E2E38;
    --line-strong: #44444F;

    --ink: #F3F2F8;
    --ink-2: #A3A1AE;
    --ink-3: #74727F;
    --ink-2-tint: #B2B0BD;
    --ink-inverse: #121218;
    --control-off: #74727F;
    --seg-on: #4A4A57;

    --accent: #9A99FF;
    --accent-pressed: #8483F0;
    --on-accent: #0E0E13;
    --accent-soft: #2B2A52;
    --accent-ink: #C3C2FF;
    --warm-ink: #FFB27A;
    --launch-bg: #1F1D5C;
    --warm-card-a: #3A2A1F; --warm-card-b: #33241A; --warm-card-ink: #E2CDBE;

    --now: #FF8A3D;
    --now-ink: #FF9A55;
    --on-now: #121218;        /* dark text on the light orange label 8.9:1 */
    --success: #4ADE80;
    --success-soft: #173A27;
    --success-ink: #4ADE80;
    --danger: #FF7A7A;
    --danger-soft: #3D1E21;
    --warning-ink: #FFD27A;
    --warning-soft: #3A2F14;

    --event-fill: rgba(200, 204, 214, 0.08);
    --event-stripe: #9CA3AF;

    --t-coral-tint: #53262B; --t-apricot-tint: #4B2C1C; --t-sun-tint: #44331D; --t-lime-tint: #2B3921;
    --t-mint-tint: #193A35;  --t-teal-tint: #173640;    --t-sky-tint: #1B3550; --t-blue-tint: #262E58;
    --t-iris-tint: #2D2C5A;  --t-grape-tint: #3C2753;   --t-rose-tint: #4E243A; --t-slate-tint: #2F313B;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 14px 40px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 18px 36px rgba(0, 0, 0, 0.6);
    --material: rgba(28, 28, 36, 0.78);
  }
}