/* ============================================================
   Our Gift Circle — Color System
   Derived from the "Circle of Friends" logo (Concept 1)
   Light + Dark mode design tokens as CSS custom properties.

   Usage:
     <html data-theme="light">  (default)
     <html data-theme="dark">
   Also auto-responds to the OS setting via prefers-color-scheme.
   ============================================================ */

/* ---------- Core brand palette (mode-independent) ----------
   These are the raw logo colors. Prefer the semantic tokens
   below in UI code; reach for these only for illustrations,
   charts, or per-person "circle member" accents. */
:root {
  --brand-coral:  #F26A5A;  /* primary — the gift box            */
  --brand-orange: #F5A44D;  /* the ribbon / bow                  */
  --brand-yellow: #F7C948;
  --brand-green:  #4CC0A0;
  --brand-blue:   #4E93D6;
  --brand-purple: #9E77CE;
  --brand-coral-deep: #E4533F; /* bow knot / pressed states      */
  --brand-cream:  #FBE3B8;     /* ribbon highlight / soft accents */

  /* The six "member" dot colors, in ring order, for assigning
     a color per person in a gift circle. */
  --member-1: #F26A5A;
  --member-2: #F5A44D;
  --member-3: #F7C948;
  --member-4: #4CC0A0;
  --member-5: #4E93D6;
  --member-6: #9E77CE;

  /* Motion / radius niceties shared across themes */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
}

/* ===========================================================
   LIGHT MODE
   Warm off-white canvas that echoes the icon tile (#FFF7F1).
   =========================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg:            #FFF7F1;  /* app background (warm white)       */
  --surface:       #FFFFFF;  /* cards, sheets                     */
  --surface-alt:   #FBF0E8;  /* subtle raised / hover fill        */
  --surface-sunken:#F4E7DD;  /* wells, inputs                     */
  --overlay:       rgba(46, 58, 70, 0.45); /* modal scrim         */

  /* Text */
  --text:          #2E3A46;  /* primary text (logo slate)         */
  --text-secondary:#5C6874;
  /* Lightest grey clearing AA (4.5:1) on BOTH --surface (#FFFFFF, 4.84:1) and
     --bg (#FFF7F1, 4.57:1). The old #8A949E was 3.08/2.91 and failed axe
     wherever it landed: .text-muted, the footer and its "·" separators, the
     home tip line, and every .hint. Do not lighten without re-checking both. */
  --text-muted:    #68737E;
  --text-inverse:  #FFFFFF;

  /* Lines */
  --border:        #ECDFD6;
  --border-strong: #D9C8BB;
  --focus-ring:    #F5A44D;

  /* Primary (coral) */
  --primary:        #F26A5A;
  --primary-hover:  #E4533F;
  --primary-active: #CC4634;
  --primary-subtle: #FDE7E3;  /* tinted badge / selected row bg   */
  /* Dark ink, not white: white on this coral is only 3.01:1. 16px/600 is NOT
     WCAG "large text" (that needs >=24px, or >=18.66px at weight 700), so 4.5:1
     applies and the old white failed. Dark ink gives 5.93:1 and keeps the brand
     coral, which the logo shares. Matches what dark mode already did. */
  --on-primary:     #2A100C;

  /* Secondary (green) — for confirming/positive actions.
     NOTE: green is light; on a solid green fill use DARK text
     (--on-secondary), not white, to stay AA. */
  --secondary:        #4CC0A0;
  --secondary-hover:  #3BAB8C;
  --secondary-subtle: #E1F4EE;
  --on-secondary:     #08201A;

  /* Semantic status — *-base for fills, *-text for text on *-subtle.
     On a solid --primary/--danger fill, keep button text >=16px
     semibold (large-text AA at 3:1) or use dark text. */
  --success:        #3BAB8C;
  --success-subtle: #E1F4EE;
  --success-text:   #1E7A5F;
  --warning:        #E8952F;
  --warning-subtle: #FDEFD8;
  --warning-text:   #A15E10;
  --danger:         #E4533F;
  --danger-subtle:  #FBE0DB;
  --danger-text:    #A82C1F;
  /* Same reasoning as --on-primary: white on this red is 3.74:1, dark is 4.76:1. */
  --on-danger:      #2A100C;
  --info:           #4E93D6;
  --info-subtle:    #E4EFFA;
  --info-text:      #2C6BB0;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(46,58,70,0.08);
  --shadow-md: 0 4px 12px rgba(46,58,70,0.10);
  --shadow-lg: 0 12px 32px rgba(46,58,70,0.14);
}

/* ===========================================================
   DARK MODE
   Warm charcoal (not pure black) so the palette stays cozy;
   brand hues are lifted slightly for contrast on dark surfaces.
   =========================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg:            #1A1512;
  --surface:       #241D19;
  --surface-alt:   #2E2621;
  --surface-sunken:#15110F;
  --overlay:       rgba(0, 0, 0, 0.60);

  /* Text */
  --text:          #F5EEE8;
  --text-secondary:#C9BDB2;
  /* Lifted from #948A80, which was 4.38:1 on --surface-alt (#2E2621) — under
     AA, though it passed on --surface and --bg. This clears all three:
     5.13 / 5.74 / 6.25. Mirrors the light-mode --text-muted note. */
  --text-muted:    #A29688;
  --text-inverse:  #241D19;

  /* Lines */
  --border:        #3A302A;
  --border-strong: #4C4038;
  --focus-ring:    #F8B563;

  /* Primary (coral, lifted) */
  --primary:        #FF8073;
  --primary-hover:  #FF9488;
  --primary-active: #FFA99F;
  --primary-subtle: #3A211D;
  --on-primary:     #2A100C;

  /* Secondary (green, lifted) */
  --secondary:        #5FD0B0;
  --secondary-hover:  #77DBBF;
  --secondary-subtle: #123027;
  --on-secondary:     #08201A;

  /* Semantic status */
  --success:        #5FD0B0;
  --success-subtle: #123027;
  --success-text:   #5FD0B0;
  --warning:        #F8B563;
  --warning-subtle: #3A2B15;
  --warning-text:   #F8B563;
  --danger:         #FF8073;
  --danger-subtle:  #3A211D;
  --danger-text:    #FF8073;
  --on-danger:      #2A100C;  /* 7.29:1 on the lifted red */
  --info:           #6BA6E0;
  --info-subtle:    #16273A;
  --info-text:      #6BA6E0;

  /* Elevation (darker, softer) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.50);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.60);

  /* Brand accents lifted for dark backgrounds */
  --member-1: #FF8073;
  --member-2: #F8B563;
  --member-3: #F9D45F;
  --member-4: #5FD0B0;
  --member-5: #6BA6E0;
  --member-6: #B58FDD;
}

/* Follow the OS preference when no explicit data-theme is set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:#1A1512; --surface:#241D19; --surface-alt:#2E2621; --surface-sunken:#15110F;
    --overlay:rgba(0,0,0,0.60);
    --text:#F5EEE8; --text-secondary:#C9BDB2; --text-muted:#A29688; --text-inverse:#241D19;
    --border:#3A302A; --border-strong:#4C4038; --focus-ring:#F8B563;
    --primary:#FF8073; --primary-hover:#FF9488; --primary-active:#FFA99F; --primary-subtle:#3A211D; --on-primary:#2A100C;
    --secondary:#5FD0B0; --secondary-hover:#77DBBF; --secondary-subtle:#123027; --on-secondary:#08201A;
    --success:#5FD0B0; --success-subtle:#123027; --warning:#F8B563; --warning-subtle:#3A2B15;
    --danger:#FF8073; --danger-subtle:#3A211D; --info:#6BA6E0; --info-subtle:#16273A;
    --on-danger:#2A100C;
    /* The *-text tokens must be listed here too: they are what `a {}` and the
       status pills use, so omitting them left light-mode dark inks (e.g. link
       #2C6BB0) painted on dark surfaces whenever Auto resolved to dark. Keep
       this block in sync with [data-theme="dark"] above. */
    --success-text:#5FD0B0; --warning-text:#F8B563; --danger-text:#FF8073; --info-text:#6BA6E0;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.40); --shadow-md:0 4px 12px rgba(0,0,0,0.50); --shadow-lg:0 12px 32px rgba(0,0,0,0.60);
    --member-1:#FF8073; --member-2:#F8B563; --member-3:#F9D45F; --member-4:#5FD0B0; --member-5:#6BA6E0; --member-6:#B58FDD;
  }
}