/* =====================================================================
   School Hub - "Bubblegum Rose" theme tokens
   ---------------------------------------------------------------------
   Every colour, space, radius, type size and motion duration used
   anywhere in the app is declared here. Components never hardcode a
   value. To retheme the app, edit this file only.
   (The previous dark theme is archived as theme-midnight.css.)

   Pink blush ground, vivid raspberry for actions, one juicy coral accent
   reserved for "this needs you". Bright and girly, but every text pairing
   is contrast-checked to 4.5:1 or better - fun never means faint.

   Two rules that outrank the aesthetic, everywhere:
     1. Body text is never below 16px.
     2. Anything tappable is never below 48px.
   Those are the ADHD/motor-accessibility floor and the tokens below
   enforce them, so a component that uses the tokens cannot violate them.
   ===================================================================== */

:root {

  /* -------------------------------------------------------------------
     BASE SURFACES - blush cream, lightest at the back
     ------------------------------------------------------------------- */
  --c-bg:            #FBF0F4;  /* page background */
  --c-bg-deep:       #F6E4EC;  /* behind the page, nav bar wells */
  --c-surface:       #FFFDFE;  /* cards */
  --c-surface-raised:#F9E4ED;  /* cards on cards, inputs */
  --c-surface-hover: #F4D6E3;  /* pressed / hovered surface */
  --c-line:          #F3D4E1;  /* hairline borders */
  --c-line-strong:   #E0AEC6;  /* emphasised borders */

  /* -------------------------------------------------------------------
     TEXT - all pass WCAG AA on --c-bg (checked, not assumed)
     ------------------------------------------------------------------- */
  --c-text:          #452F3B;  /* headings and body      11.5:1 */
  --c-text-soft:     #664A58;  /* secondary body          6.7:1 */
  --c-text-muted:    #7E5F6E;  /* labels, timestamps      4.7:1 */
  --c-text-on-light: #FFFFFF;  /* text sitting on a raspberry or coral fill */

  /* -------------------------------------------------------------------
     BRAND
     raspberry = the app's own colour: actions, links, the active tab
     coral     = "this needs you". Rationed to overdue work, uniform days
                 and High priority, so her eye learns exactly what it means.
     ------------------------------------------------------------------- */
  --c-primary:       #B83A72;
  --c-primary-bright:#9C2F5F;   /* pressed/hover: deeper, not brighter */
  --c-primary-deep:  #822750;
  --c-primary-wash:  rgba(184, 58, 114, 0.12);

  --c-neon:          #9A3E1B;   /* the focus slot wears juicy coral */
  --c-neon-wash:     rgba(224, 122, 82, 0.16);
  --c-neon-glow:     rgba(224, 122, 82, 0.24);

  /* -------------------------------------------------------------------
     STATUS
     Overdue is coral, not red. It has to read as "this needs you"
     without reading as "you are in trouble".
     ------------------------------------------------------------------- */
  --c-overdue:       #9A3E1B;
  --c-overdue-wash:  rgba(224, 122, 82, 0.16);
  --c-overdue-line:  rgba(224, 122, 82, 0.45);

  --c-done:          #2F7D4F;
  --c-done-wash:     rgba(63, 141, 92, 0.14);

  --c-warn:          #96621B;
  --c-danger:        #B33A4E;   /* destructive confirms only, never overdue */
  --c-danger-wash:   rgba(179, 58, 78, 0.11);

  /* Component accents that once hardcoded dark-theme values. */
  --c-track:         rgba(90, 47, 66, 0.11);      /* grading-bar rail */
  --c-mass:          #8B6FC5;                     /* Mass-day chip */
  --c-mass-text:     #5E4791;
  --c-mass-wash:     rgba(151, 120, 214, 0.14);
  --c-overdue-faint: rgba(224, 122, 82, 0.08);    /* overdue row tint */
  --c-tab-current:   var(--c-primary);            /* active nav tab */

  /* Priority dots on tasks. */
  --c-prio-low:      #93737F;
  --c-prio-normal:   #B83A72;
  --c-prio-high:     #9A3E1B;

  /* -------------------------------------------------------------------
     CALENDAR FEED COLOURS
     One per seeded feed, muted but tellable-apart on the month grid.
     Also written into calendar_feeds.color by the seeder.
     ------------------------------------------------------------------- */
  --c-feed-1:        #E86FA4;  /* Kirrily        - pink       */
  --c-feed-2:        #F08A5C;  /* SMYO softball  - peach      */
  --c-feed-3:        #A98BE0;  /* Middle School  - lilac      */
  --c-feed-4:        #66A9DE;  /* School-wide    - sky        */
  --c-feed-5:        #E4B33C;  /* spare          - sunshine   */
  --c-feed-6:        #B83A72;  /* spare          - raspberry  */

  /* -------------------------------------------------------------------
     TYPOGRAPHY
     One rounded family; weight does the hierarchy work. Falls back to
     system fonts so the app is readable before the webfont lands.
     ------------------------------------------------------------------- */
  --font-display: "Nunito", "Segoe UI Rounded", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Nunito", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale. --fs-body is the floor for anything a person reads. */
  --fs-micro:  0.8125rem;  /* 13px - timestamps and chips only, never prose */
  --fs-small:  0.875rem;   /* 14px - labels above a field */
  --fs-body:   1rem;       /* 16px - MINIMUM for body copy */
  --fs-body-lg:1.0625rem;  /* 17px - primary list rows */
  --fs-lead:   1.25rem;    /* 20px */
  --fs-h3:     1.375rem;   /* 22px */
  --fs-h2:     1.75rem;    /* 28px */
  --fs-h1:     2.25rem;    /* 36px */
  --fs-hero:   2.75rem;    /* 44px - the day-of-week on Today */

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-body:   1.7;        /* wide, per the legibility brief */
  --lh-loose:  1.8;

  --ls-display: -0.015em;
  --ls-body:     0;
  --ls-caps:     0.08em;

  --fw-regular: 400;
  --fw-medium:  600;       /* Nunito's 500 is faint; 600 is its "medium" */
  --fw-bold:    700;
  --fw-display: 800;       /* rounded face needs its weight said out loud */

  /* -------------------------------------------------------------------
     SPACING - 4px base
     ------------------------------------------------------------------- */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */

  /* Page gutter. Kept at 16px so a 375px viewport has 343px of content. */
  --gutter: var(--sp-4);

  /* -------------------------------------------------------------------
     TOUCH TARGETS - the 48px floor
     ------------------------------------------------------------------- */
  --tap-min:   48px;   /* absolute minimum for anything interactive */
  --tap-comfy: 56px;   /* default for primary controls */
  --tap-large: 64px;   /* quick-add, complete-task */

  /* -------------------------------------------------------------------
     SHAPE
     ------------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  --border:        1px solid var(--c-line);
  --border-strong: 1px solid var(--c-line-strong);

  /* -------------------------------------------------------------------
     ELEVATION - soft, warm, barely-there
     ------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(140, 60, 95, 0.09);
  --shadow:    0 4px 14px rgba(140, 60, 95, 0.12);
  --shadow-lg: 0 10px 28px rgba(140, 60, 95, 0.16);

  /* The single "you are here" ring. No glows anywhere. */
  --glow-neon:    0 0 0 2px var(--c-neon);
  --glow-primary: 0 0 0 2px var(--c-primary);

  /* Focus ring. Always visible, never removed. */
  --focus-ring: 0 0 0 3px var(--c-bg), 0 0 0 6px var(--c-primary);

  /* -------------------------------------------------------------------
     MOTION
     Short and functional. Nothing loops, nothing autoplays.
     ------------------------------------------------------------------- */
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    380ms;
  --ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* -------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------- */
  --content-max:   680px;  /* the app stays a phone-width column on desktop */
  --nav-height:    68px;   /* bottom nav; content reserves this plus safe area */
  --quickadd-height: 64px; /* the pinned add-a-task bar that sits above the nav */
  --header-height: 56px;

  --z-base:    0;
  --z-sticky:  20;
  --z-nav:     40;
  --z-overlay: 60;
  --z-toast:   80;
}

/* ---------------------------------------------------------------------
   Users who ask their device for less motion get none of it.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-base:    1ms;
    --dur-slow:    1ms;
  }
}

/* ---------------------------------------------------------------------
   Forced-colors / high-contrast mode: drop the rings, keep the borders.
   --------------------------------------------------------------------- */
@media (forced-colors: active) {
  :root {
    --glow-neon:    0 0 0 2px CanvasText;
    --glow-primary: 0 0 0 2px CanvasText;
    --shadow-sm: none;
    --shadow:    none;
    --shadow-lg: none;
  }
}