/* ============================================================
   Opal Design System — Colors & Type
   Derived from the Opal Design System Figma file.
   ============================================================ */

:root {
  /* ---------------------------------------------------------- */
  /*  BRAND PALETTE                                             */
  /*  The Opal system is dark-first. These are the branded      */
  /*  accents that show up across glow buttons, toggles,        */
  /*  gradients, timer rings and promo moments.                 */
  /* ---------------------------------------------------------- */
  --opal-lime:        rgb(212, 255, 156);  /* primary brand accent */
  --opal-cyan:        rgb(158, 249, 255);  /* secondary brand accent */
  --opal-mint:        rgb(161, 255, 215);  /* gem / success */
  --opal-teal:        rgb(0, 204, 174);    /* "on" toggle cast */
  --opal-pink:        rgb(255, 87, 117);   /* destructive / alarm */
  --opal-red:         rgb(255, 87, 117);
  --opal-yellow:      rgb(255, 226, 108);  /* caution / streak */
  --opal-gold:        rgb(254, 185, 75);
  --opal-saffron:     rgb(248, 195, 82);
  --opal-lilac:       rgb(236, 184, 255);  /* category tint */
  --opal-peach:       rgb(255, 214, 170);  /* category tint */
  --opal-sky:         rgb(164, 200, 255);  /* unlock / allowed */
  --opal-blue:        rgb(101, 186, 255);  /* info / link */
  --opal-cream:       rgb(254, 237, 134);  /* soft gold tint */

  /* Dev-only accent used in Figma to mark prototype regions */
  --opal-violet-dev:  rgb(151, 71, 255);

  /* ---------------------------------------------------------- */
  /*  GRADIENTS                                                 */
  /* ---------------------------------------------------------- */
  --opal-gradient-primary: linear-gradient(180deg, rgb(212,255,156) 0%, rgb(158,249,255) 100%);
  --opal-gradient-primary-h: linear-gradient(90deg,  rgb(212,255,156) 0%, rgb(158,249,255) 100%);
  --opal-gradient-warm:    linear-gradient(180deg, rgb(255,226,108) 0%, rgb(255,214,170) 100%);
  --opal-gradient-sunset:  linear-gradient(180deg, rgb(255,214,170) 0%, rgb(255,87,117)  100%);
  --opal-toggle-on:        linear-gradient(rgba(0,255,204,0.5),rgba(0,255,204,0.5)),
                           linear-gradient(rgba(0,0,0,0.35),rgba(0,0,0,0.35)),
                           linear-gradient(rgb(212,255,156),rgb(212,255,156));

  /* ---------------------------------------------------------- */
  /*  NEUTRALS — iOS (dark)                                     */
  /*  Opal's canvas is near-black with layered translucent      */
  /*  surfaces. Body scrims, sheets and cards use rgba white.   */
  /* ---------------------------------------------------------- */
  --ios-bg:            rgb(0, 0, 0);
  --ios-bg-elevated:   rgb(22, 22, 22);
  --ios-bg-card:       rgb(18, 18, 18);
  --ios-bg-deepest:    rgb(13, 13, 13);
  --ios-hairline:      rgba(255, 255, 255, 0.1);
  --ios-hairline-soft: rgba(255, 255, 255, 0.05);
  --ios-separator:     rgb(44, 44, 46);
  --ios-separator-2:   rgb(99, 99, 102);

  /* Translucent white surfaces (the iOS "ultra-thin" look) */
  --ios-glass-3:       rgba(255, 255, 255, 0.03);
  --ios-glass-5:       rgba(255, 255, 255, 0.05);
  --ios-glass-10:      rgba(255, 255, 255, 0.10);
  --ios-glass-15:      rgba(255, 255, 255, 0.15);
  --ios-glass-20:      rgba(255, 255, 255, 0.20);
  --ios-glass-35:      rgba(255, 255, 255, 0.35);

  /* ---------------------------------------------------------- */
  /*  NEUTRALS — Android                                        */
  /* ---------------------------------------------------------- */
  --android-bg:        rgb(13, 13, 13);
  --android-surface:   rgb(20, 20, 20);

  /* ---------------------------------------------------------- */
  /*  SEMANTIC FOREGROUND                                       */
  /*  fg1/fg2/fg3/fg4 is how Opal actually uses its type color. */
  /* ---------------------------------------------------------- */
  --fg1:  rgb(255, 255, 255);              /* primary text */
  --fg2:  rgba(255, 255, 255, 0.6);        /* secondary text */
  --fg3:  rgba(255, 255, 255, 0.4);        /* tertiary text / placeholders */
  --fg4:  rgba(255, 255, 255, 0.2);        /* quaternary / disabled */
  --fg-on-light: rgb(0, 0, 0);

  /* ---------------------------------------------------------- */
  /*  STATUS / STATE TINTS                                      */
  /* ---------------------------------------------------------- */
  --status-positive:   var(--opal-lime);
  --status-negative:   var(--opal-pink);
  --status-blocked:    var(--opal-sky);
  --status-allowed:    var(--opal-mint);
  --status-warn:       var(--opal-yellow);
  --status-info:       var(--opal-blue);

  /* ---------------------------------------------------------- */
  /*  SHADOWS                                                   */
  /*  Two systems: soft ambient scrim for floating cards, and   */
  /*  inset hairlines that fake the glassy 1px highlight.       */
  /* ---------------------------------------------------------- */
  --shadow-card:         0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.25);
  --shadow-pop:          0 12px 40px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.15);
  --shadow-glass-inset:  inset 0 1px 0.5px 0 rgba(255,255,255,0.10);
  --shadow-glass-inset-strong: inset 0 1px 0.5px 0 rgba(255,255,255,0.15);
  --shadow-press:        0 2px 6px rgba(0,0,0,0.2);
  --shadow-glow-lime:    0 0 24px 4px rgba(212,255,156,0.35);
  --shadow-glow-cyan:    0 0 24px 4px rgba(158,249,255,0.35);

  /* ---------------------------------------------------------- */
  /*  RADII                                                     */
  /*  iOS app-icon superellipse ≈14; cards 20–32; sheets 32–52; */
  /*  showcase frames 80; pills 100; circles 99999.             */
  /* ---------------------------------------------------------- */
  --radius-xs:    6px;   /* chip */
  --radius-sm:    10px;  /* input / small control */
  --radius-md:    14px;  /* app-icon / medium card */
  --radius-lg:    20px;  /* card */
  --radius-xl:    28px;  /* sheet top / hero card */
  --radius-2xl:   32px;  /* smart-hint / modal */
  --radius-3xl:   52px;  /* phone screen */
  --radius-4xl:   80px;  /* showcase frame */
  --radius-pill:  9999px;

  /* ---------------------------------------------------------- */
  /*  SPACING                                                   */
  /*  Opal uses a 4px grid. Showcase frames pad with 100px.     */
  /* ---------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 100px;   /* showcase frame inset */

  /* ---------------------------------------------------------- */
  /*  MOTION                                                    */
  /* ---------------------------------------------------------- */
  --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:       120ms;
  --dur-base:       200ms;
  --dur-slow:       320ms;

  /* ---------------------------------------------------------- */
  /*  TYPE FAMILIES                                             */
  /*  Opal uses SF Pro (iOS) and Geist (Android/modern).        */
  /*  Icons are Material Symbols Rounded.                       */
  /*  System font stacks fall back gracefully when web fonts    */
  /*  aren't available.                                         */
  /* ---------------------------------------------------------- */
  --font-display: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
                   "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-text:    "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
                   "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-android: "Geist", "Roboto", system-ui, sans-serif;
  --font-icon:    "Material Symbols Rounded", "Material Icons Round", sans-serif;

  /* Display tracking tokens (iOS uses tight tracking on big type) */
  --tracking-display: -0.025em;
  --tracking-title:    0.010em;
  --tracking-body:     0.004em;
  --tracking-caption:  0.005em;
}

/* ============================================================
   iOS TYPE RAMP
   Exact specs from the Figma Typography page.
   Weights: Regular 400 / Medium 500 / Semibold 600 / Bold 700
   ============================================================ */

.t-ios-large-title     { font-family: var(--font-display); font-size: 36px;  line-height: 100%;   letter-spacing: var(--tracking-title); font-weight: 600; }
.t-ios-title-28        { font-family: var(--font-display); font-size: 28px;  line-height: 34px;   letter-spacing: 0.36%; font-weight: 600; }
.t-ios-title-22        { font-family: var(--font-display); font-size: 22px;  line-height: 28px;   letter-spacing: 0.34%; font-weight: 600; }
.t-ios-title-20        { font-family: var(--font-display); font-size: 20px;  line-height: 25px;   letter-spacing: 0.36%; font-weight: 600; }
.t-ios-body-17         { font-family: var(--font-text);    font-size: 17px;  line-height: 22px;   letter-spacing: 0.37%; font-weight: 400; }
.t-ios-body-17-semi    { font-family: var(--font-text);    font-size: 17px;  line-height: 22px;   letter-spacing: 0.37%; font-weight: 600; }
.t-ios-callout-16      { font-family: var(--font-text);    font-size: 16px;  line-height: 22px;   letter-spacing: 0.41%; font-weight: 400; }
.t-ios-callout-16-semi { font-family: var(--font-text);    font-size: 16px;  line-height: 22px;   letter-spacing: 0.41%; font-weight: 600; }
.t-ios-footnote-13     { font-family: var(--font-text);    font-size: 13px;  line-height: 18px;   letter-spacing: 0.51%; font-weight: 400; }
.t-ios-footnote-13-semi{ font-family: var(--font-text);    font-size: 13px;  line-height: 18px;   letter-spacing: 0.51%; font-weight: 600; }
.t-ios-caption-11      { font-family: var(--font-text);    font-size: 11px;  line-height: 14px;   letter-spacing: 0.06px; font-weight: 400; }
.t-ios-caption-spaced-9{ font-family: var(--font-text);    font-size: 9px;   line-height: 9.6px;  letter-spacing: 0.80%; font-weight: 400; text-transform: uppercase; }

/* ============================================================
   ANDROID (GEIST) TYPE RAMP
   ============================================================ */

.t-and-title-28        { font-family: var(--font-android); font-size: 28px; line-height: 1.15;  letter-spacing: -0.015em; font-weight: 600; }
.t-and-headline-22     { font-family: var(--font-android); font-size: 22px; line-height: 28px;  letter-spacing: -0.015em; font-weight: 500; }
.t-and-body-17         { font-family: var(--font-android); font-size: 17px; line-height: 1.35;  letter-spacing: 0;       font-weight: 400; }
.t-and-body-17-medium  { font-family: var(--font-android); font-size: 17px; line-height: 22px;  letter-spacing: -0.015em; font-weight: 500; }
.t-and-callout-16      { font-family: var(--font-android); font-size: 16px; line-height: 22px;  letter-spacing: 0.41%;    font-weight: 400; }
.t-and-caption-13      { font-family: var(--font-android); font-size: 13px; line-height: 18px;  letter-spacing: -0.015em; font-weight: 500; }

.funnel-frame h1:focus { outline: none; }

/* ============================================================
   SEMANTIC HEADING CLASSES — drop-in for prose
   ============================================================ */

.h1  { font-family: var(--font-display); font-weight: 600; font-size: 68px; line-height: 100%; letter-spacing: var(--tracking-title); color: var(--fg1); }
.h2  { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 100%; letter-spacing: var(--tracking-title); color: var(--fg1); }
.h3  { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 34px;  color: var(--fg1); }
.h4  { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 28px;  color: var(--fg1); }
.h5  { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 25px;  color: var(--fg1); }
.p   { font-family: var(--font-text);    font-weight: 400; font-size: 17px; line-height: 22px;  color: var(--fg1); }
.p-muted { font-family: var(--font-text);font-weight: 400; font-size: 16px; line-height: 22px;  color: var(--fg2); }
.caption { font-family: var(--font-text);font-weight: 400; font-size: 11px; line-height: 14px;  color: var(--fg2); }
.eyebrow { font-family: var(--font-text);font-weight: 400; font-size: 9px;  line-height: 9.6px; letter-spacing: 0.8%; text-transform: uppercase; color: var(--fg2); }

/* ============================================================
   UTILS
   ============================================================ */

.surface-card       { background: var(--ios-bg-card);   border-radius: var(--radius-lg); box-shadow: var(--shadow-glass-inset); }
.surface-elevated   { background: var(--ios-bg-elevated); border-radius: var(--radius-xl); }
.surface-glass      { background: var(--ios-glass-5);   backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); box-shadow: var(--shadow-glass-inset); }
.hairline           { border: 1px solid var(--ios-hairline); }