/* =====================================================================
   Oasis — design tokens
   The Healthrise Oasis kit. Built directly from the source wordmark:
   pale-cyan letters with a white halo, navy interior stripes, palm
   trunks fading from pale cyan to electric royal blue, all set on a
   center-lit teal-navy concrete canvas.

   "Soft" vs "neon" is now a brightness setting — same palette, calmer
   handling.
   ===================================================================== */

/* ---------------------------------------------------------------- */
/*  Aptos · the Healthrise type family                              */
/* ---------------------------------------------------------------- */
@font-face {
  font-family: 'Aptos';
  src: url('fonts/Aptos.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aptos';
  src: url('fonts/Aptos-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aptos';
  src: url('fonts/Aptos-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aptos Display';
  src: url('fonts/Aptos-Display.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aptos Display';
  src: url('fonts/Aptos-Display-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------------------------------------------------------------- */
  /*  Surfaces — teal-tinted concrete, matching the source canvas     */
  /* ---------------------------------------------------------------- */
  --o-bg:            #0B1E2E;   /* concrete teal-navy                 */
  --o-bg-2:          #0F2A3D;   /* raised                             */
  --o-bg-3:          #061421;   /* recess / deepest                   */
  --o-bg-vignette:   #1B4A66;   /* the center teal wash               */
  --o-bg-paper:      #F1F8FB;   /* light-mode invitation stock        */

  --o-surface-1:     rgba(234, 246, 251, 0.04);
  --o-surface-2:     rgba(234, 246, 251, 0.07);
  --o-surface-3:     rgba(234, 246, 251, 0.11);

  /* ---------------------------------------------------------------- */
  /*  Text — cool cream cyan                                          */
  /* ---------------------------------------------------------------- */
  --o-text:          #EAF6FB;   /* primary                            */
  --o-text-2:        #9BB6C6;   /* secondary                          */
  --o-text-3:        #5E768A;   /* tertiary / muted                   */
  --o-text-on-light: #0B1E2E;

  /* ---------------------------------------------------------------- */
  /*  Lines — softer than v1, but cool not warm                       */
  /* ---------------------------------------------------------------- */
  --o-rule:          rgba(164, 218, 242, 0.10);
  --o-rule-strong:   rgba(164, 218, 242, 0.22);

  /* ---------------------------------------------------------------- */
  /*  Palm spectrum — the wordmark gradient. Canopy (pale, top) to    */
  /*  trunk-base (deep electric blue, bottom).                        */
  /* ---------------------------------------------------------------- */
  --o-palm-1:        #F2FCFD;   /* canopy highlight                  */
  --o-palm-2:        #C4ECF6;   /* pale cyan                         */
  --o-palm-3:        #A4DAF2;   /* sky                               */
  --o-palm-4:        #74D2E8;   /* sky cyan — anchor                 */
  --o-palm-5:        #38CBCF;   /* mint neon                         */
  --o-palm-6:        #1E66D0;   /* electric blue                     */
  --o-palm-7:        #1142B8;   /* royal                             */
  --o-palm-8:        #04197A;   /* trunk-base deep blue              */

  /* Solid accents — the same hues but flat. Use these for icons,
     buttons, tags. The cyan-sky pair is the primary emphasis device. */
  --o-cyan:          #74D2E8;   /* primary accent — matches letter   */
                                /* fill in the source                 */
  --o-sky:           #A4DAF2;   /* lightest cyan                     */
  --o-mint:          #38CBCF;   /* anchor neon                       */
  --o-electric:      #1E66D0;   /* deep accent                       */
  --o-trunk:         #04197A;   /* deepest blue                      */

  /* ---------------------------------------------------------------- */
  /*  Gradients                                                       */
  /* ---------------------------------------------------------------- */

  /* The Healthrise brand spectrum, horizontal — extended so it ends
     on the bright teal rather than light sky. Use on hero accents
     and as text-fill via .o-grad-text. */
  --o-grad-spectrum: linear-gradient(90deg,
    #09197A 0%,
    #4D51C7 22%,
    #4C81CA 44%,
    #ADD9EF 68%,
    #38CBCF 100%);

  /* Vertical palm — sunrise of cyans descending into electric blue. */
  --o-grad-palm: linear-gradient(180deg,
    #F2FCFD 0%,
    #C4ECF6 12%,
    #A4DAF2 26%,
    #74D2E8 42%,
    #38CBCF 58%,
    #1E66D0 78%,
    #1142B8 92%,
    #04197A 100%);

  /* Horizontal horizon — the Healthrise brand gradient. Lifted
     directly from Prism's --c-grad-spectrum (the original brand
     tokens). Indigo → teal → pale cyan, no deep navy at the start
     so it reads cleanly as a text-fill on a dark page. */
  --o-grad-horizon: linear-gradient(95deg,
    #4D51C7 0%,
    #4863D2 20%,
    #4C81CA 38%,
    #38CBCF 55%,
    #60CBC4 72%,
    #ADD9EF 90%,
    #E2F6F7 100%);

  /* Local atmospheric lighting — for banners and hero plates only.   */
  /* Never apply this to a long scrolling page; the centered glow     */
  /* turns into an awkward spotlight that follows the viewport.       */
  --o-grad-glow:
    radial-gradient(60% 55% at 50% 50%, rgba(27, 74, 102, 0.65) 0%, rgba(27, 74, 102, 0) 70%),
    radial-gradient(55% 50% at 50% 50%, rgba(116, 210, 232, 0.14) 0%, rgba(116, 210, 232, 0) 75%);

  /* Card tint. */
  --o-grad-card-tint: linear-gradient(180deg,
    rgba(116, 210, 232, 0.05),
    rgba(30, 102, 208, 0.03));

  /* Light-mode (paper) — for invitations printed light. */
  --o-grad-paper: linear-gradient(180deg,
    #F1F8FB 0%,
    #DCEBF2 100%);

  /* Concrete grain — subtle, cool-toned. */
  --o-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.91 0 0 0 0 0.96 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* ---------------------------------------------------------------- */
  /*  Shadows — soft halos. No harsh neon strokes.                    */
  /* ---------------------------------------------------------------- */
  --o-halo:
    0 0 16px rgba(164, 218, 242, 0.28),
    0 0 48px rgba(116, 210, 232, 0.16);

  --o-halo-deep:
    0 0 20px rgba(116, 210, 232, 0.32),
    0 0 60px rgba(30, 102, 208, 0.22);

  --o-halo-faint:
    0 0 12px rgba(234, 246, 251, 0.12),
    0 0 32px rgba(116, 210, 232, 0.08);

  --o-lift-1:
    0 1px 0 rgba(234, 246, 251, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.25);

  --o-lift-2:
    0 1px 0 rgba(234, 246, 251, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.35);

  /* ---------------------------------------------------------------- */
  /*  Typography — Aptos throughout                                   */
  /* ---------------------------------------------------------------- */
  --o-font-display:  'Aptos Display', 'Aptos', system-ui, sans-serif;
  --o-font-heading:  'Aptos', system-ui, sans-serif;
  --o-font-body:     'Aptos', system-ui, sans-serif;
  --o-font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — generous, calm */
  --o-fs-hero:        148px;
  --o-fs-display-1:   120px;
  --o-fs-display-2:    80px;
  --o-fs-display-3:    56px;
  --o-fs-h1:           44px;
  --o-fs-h2:           32px;
  --o-fs-h3:           24px;
  --o-fs-lead:         20px;
  --o-fs-body:         16px;
  --o-fs-small:        14px;
  --o-fs-micro:        13px;
  --o-fs-eyebrow:      12px;
  --o-fs-mono:         11px;

  /* Line heights — looser */
  --o-lh-hero:    0.95;
  --o-lh-display: 1.05;
  --o-lh-tight:   1.2;
  --o-lh-body:    1.65;
  --o-lh-loose:   1.8;

  /* Letter spacing — Aptos tightens at display sizes. */
  --o-ls-hero:     -0.035em;
  --o-ls-display:  -0.025em;
  --o-ls-heading:  -0.015em;
  --o-ls-tight:    -0.01em;
  --o-ls-eyebrow:   0.22em;
  --o-ls-mono:      0.14em;

  /* ---------------------------------------------------------------- */
  /*  Spacing — generous tropical rhythm                              */
  /* ---------------------------------------------------------------- */
  --o-space-1:    4px;
  --o-space-2:    8px;
  --o-space-3:   12px;
  --o-space-4:   16px;
  --o-space-5:   24px;
  --o-space-6:   32px;
  --o-space-7:   44px;
  --o-space-8:   64px;
  --o-space-9:   88px;   /* page gutter                          */
  --o-space-10: 112px;
  --o-space-11: 144px;   /* major vertical section breaks        */
  --o-space-12: 192px;   /* hero breathing room                  */
  --o-page-pad:  88px;

  /* ---------------------------------------------------------------- */
  /*  Radii — pillows, not cards                                      */
  /* ---------------------------------------------------------------- */
  --o-radius-xs:    6px;
  --o-radius-sm:   12px;
  --o-radius-md:   20px;
  --o-radius-lg:   32px;
  --o-radius-xl:   56px;
  --o-radius-pill: 999px;

  /* ---------------------------------------------------------------- */
  /*  Motion                                                          */
  /* ---------------------------------------------------------------- */
  --o-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --o-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --o-dur-fast:    220ms;
  --o-dur-base:    420ms;
  --o-dur-slow:    720ms;
}