/* Extracted verbatim from config-design-system-v5_24.html — do not hand-edit.
   Regenerate with tools/extract_ds.py. */

:root{
  /* BRAND */
  --teal-50:  #EAF6F6;
  --teal-100: #CFEAEB;
  --teal-200: #A3D7D9;
  --teal-300: #6EC1C4;
  --teal-400: #4FB7BA;
  --teal-500: #35B2B6;   /* brand primary — your locked value */
  --teal-600: #0D6A6D;   /* hover / active — your locked value */
  --teal-700: #084B4D;
  --teal-900: #042A2C;

  /* PRICE — sale/from prices ONLY */
  --price-500: #E11D48;
  --price-600: #BE123C;

  /* MARKER — content-category markers, never state, never price.
     Used on small visual flags (~5 px dots) that distinguish content origin
     in mixed lists — for example, user-created entries among system holidays
     in the Calendar Events sheet. Same hex as price-500 today; intentionally
     a separate token so a future price refresh can move independently. */
  --marker-personal: #E11D48;

  /* DANGER — destructive actions ONLY */
  --danger-50:  #FEF2F2;
  --danger-500: #DC2626;
  --danger-600: #B91C1C;

  /* STATUS */
  --success-50:  #F0FDF4;
  --success-100: #DCFCE7;
  --success-500: #16A34A;
  --success-600: #15803D;
  --warning-50:  #FEFCE8;
  --warning-500: #EAB308;
  --warning-600: #CA8A04;
  --info-500:    #0EA5E9;

  /* INK */
  --ink:       #10151B;
  --ink-2:     #2A323B;
  --ink-3:     #4B5563;
  --ink-4:     #6B7280;
  --ink-5:     #9CA3AF;
  --ink-6:     #D1D5DB;
  --line:      #E5E7EB;
  --line-2:    #F3F4F6;

  /* LINE-ON-TEAL — v5_24
     Divider color for surfaces filled with --teal-50. Standard --line and --line-2
     are gray; on a teal-50 fill they read as a flat color discontinuity rather
     than a soft separator. --line-on-teal is teal-700 at 14% alpha so it darkens
     the parent fill slightly into the same hue family. Used inside .opt-card-detail
     and any future tinted-surface inset section. Never use on white pages. */
  --line-on-teal: rgba(8,75,77,.14);

  /* SURFACE */
  --bg-page:    #F5F0EB;   /* category/showcase pages ONLY (Photo Books). Never under secondary buttons or segments. */
  --bg-surface: #FFFFFF;   /* editor, sheets, modals, cart */
  --bg-subtle:        #FAF7F4;   /* unselected option cards */
  --bg-subtle-hover:  #F0E9DF;   /* hover for unselected option/tile cards — same warm hue, ~4% darker */
  --bg-muted:   #F3F4F6;   /* X close button bg, input unfilled, segment hover */

  /* FONT */
  --font-sans: "Roboto", system-ui, -apple-system, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;
  --font-display: "Fraunces", serif;  /* DOCUMENTATION ONLY */

  /* TYPOGRAPHY SCALE — every text size in the product picks from here */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   28px;
  --text-3xl:   34px;

  /* SPACING */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-screen: 16px;

  /* RADIUS */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* BUTTON HEIGHTS — locked */
  --btn-h:  44px;    /* single locked button height — Apple HIG balanced */

  /* SHADOW */
  --shadow-xs: 0 1px 2px rgba(15,21,27,.04);
  --shadow-sm: 0 1px 3px rgba(15,21,27,.06), 0 1px 2px rgba(15,21,27,.04);
  --shadow-md: 0 4px 12px -2px rgba(15,21,27,.08), 0 2px 4px rgba(15,21,27,.05);
  --shadow-lg: 0 12px 28px -8px rgba(15,21,27,.14), 0 4px 8px rgba(15,21,27,.06);
  --shadow-sheet: 0 -16px 40px -8px rgba(15,21,27,.16);
  --overlay-scrim: rgba(15,21,27,.35);          /* sheet backdrop dimmer — light enough to preserve live preview */
  --overlay-scrim-strong: rgba(15,21,27,.62);   /* onboarding overlay — strong dim, focus on callouts not canvas */

  /* Interaction-state tokens */
  --teal-500-30: rgba(53,178,182,.30);   /* focus halo on buttons & links */
  --teal-500-18: rgba(53,178,182,.18);   /* focus halo on inputs */
  --teal-500-12: rgba(53,178,182,.12);   /* hover surface for ghost-style buttons */
  --danger-500-12: rgba(220,38,38,.12);  /* focus halo on error inputs */
  --focus-ring: 0 0 0 2px var(--teal-500-30);   /* 2 px ring for block elements (buttons, inputs, cards) */
  --focus-ring-offset: 2px;                     /* 2 px white offset between element and ring */
  --focus-underline: 2px solid var(--teal-600); /* underline for inline links — never use halo on text */
  --press-scale: .985;
  --disabled-opacity: .5;

  /* MOTION */
  /* Motion — complete palette
     Three durations × two easings × one spring. Used by every transition in the system. */
  --ease-out:    cubic-bezier(.2, .85, .25, 1);    /* default — UI elements settling into place */
  --ease-in:     cubic-bezier(.4, 0, 1, 1);        /* exits — UI elements leaving the screen */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* sheet entries, micro-bounce on actions */
  --dur-instant: 80ms;     /* press feedback, hover surface change, focus ring */
  --dur-fast:    160ms;    /* color transitions, small surface changes */
  --dur-base:    240ms;    /* sheet/modal enter, page transitions */
  --dur-slow:    320ms;    /* large sheet motions, complex transitions */
}