/* =========================================================================
   Lunery Studio — Foundations
   Single source of truth for color, type, spacing, radii, shadows, motion.
   Dark by default. Periwinkle-on-blue-black creator-control-room aesthetic.
   ========================================================================= */

/* ---- Fonts ----------------------------------------------------------------
   Hosted via Google Fonts. To go offline, drop .woff2 files into ./fonts/
   and replace the @import below with @font-face declarations.
   --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Color: surfaces ---- */
  --bg-shell:    #0b0b13;
  --bg-stage:    #27283f;
  --bg-canvas:   #2e2e48;
  --bg-panel:    #1e1d2e;
  --bg-rail:     #1e1c30;
  --surface-1:   #302d47;
  --surface-2:   #3b385a;
  --surface-3:   #48436a;

  /* ---- Color: accents ---- */
  --accent-lav:     #a9adff;
  --accent-lav-2:   #8289dd;
  --accent-purple:  #a46bd6;
  --accent-purple-2:#8f61c9;
  --accent-pink:    #d9758e;
  --accent-gold:    #c7a177;

  /* ---- Color: text ---- */
  --text:           #f7f3ff;
  --text-muted:     #9c98c4;
  --text-quiet:     #74729c;
  /* For text rendered on top of a light accent fill (lav, lav-2, purple, pink, gold)
     where #fff would have poor contrast. Use this dark periwinkle-black instead. */
  --text-on-accent: #1c1a2e;

  /* ---- Color: strokes ---- */
  /* Strokes are always chunky (2px) — the same weight as the button ring.
     Lunery has no hairlines: separate with tone, elevation, or spacing instead. */
  --stroke-w:      2px; /* @kind spacing */
  --stroke:        rgba(157, 158, 225, .22);
  --stroke-strong: rgba(178, 178, 255, .42);
  --stroke-card:   rgba(146, 148, 229, .16);

  /* ---- Status: two orthogonal systems ---------------------------------
     1. Availability INTENT — fills the cell / dot (what kind of time it is).
     2. Workflow STATE     — strokes the ring / badge (where it sits in the flow).
     A scheduled stream =  --intent-stream fill + --ring-scheduled ring.
     A pending meeting   =  --intent-meeting fill + --ring-pending ring.
     A tentative conflict=  --intent-tentative fill + --ring-conflict ring.
     -------------------------------------------------------------------- */

  /* Intent (fill / dot) */
  --intent-stream:       #a9adff;
  --intent-meeting:      #a46bd6;
  --intent-tentative:    #c7a177;
  --intent-unavailable:  #5b577a;

  /* Workflow state (ring / border / badge stroke) */
  --ring-draft:      inset 0 0 0 2px rgba(157, 158, 225, .30); /* @kind shadow */   /* quiet 2px ring, paired with a diagonal hatch fill */
  --ring-scheduled:  inset 0 0 0 2px rgba(203, 207, 255, .55); /* @kind shadow */
  --ring-pending:    inset 0 0 0 2px rgba(199, 161, 119, .65); /* @kind shadow */
  --ring-conflict:   inset 0 0 0 2px rgba(217, 117, 142, .55); /* @kind shadow */

  /* Legacy / convenience aliases (kept for the UI kit's StatusPill API).
     Prefer --intent-* and --ring-* in new code. */
  --status-stream:       var(--intent-stream);
  --status-meeting:      var(--intent-meeting);
  --status-tentative:    var(--intent-tentative);
  --status-unavailable:  var(--intent-unavailable);
  --status-scheduled:    #8f98c8;
  --status-pending:      var(--intent-tentative);
  --status-conflict:     #d9758e;

  /* ---- Wallpaper (used only at edges, behind the app shell) ---- */
  --wallpaper-a: #8e92ff;
  --wallpaper-b: #747ce9;
  --wallpaper:
    radial-gradient(900px 500px at 96% 13%, rgba(167, 158, 255, .44), transparent 55%),
    radial-gradient(940px 580px at  2%  4%, rgba(163, 160, 255, .65), transparent 58%),
    linear-gradient(135deg, var(--wallpaper-a) 0%, #7f88f7 28%, var(--wallpaper-b) 100%); /* @kind color */

  /* ---- Canvas star grid ----
     The workarea texture is a lattice of mini 4-point stars (not circles).
     The tile is a 28-unit SVG; background-size scales the whole star. ---- */
  --canvas-dots:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='rgba(174,177,255,.24)' d='M14 10.6C14.45 12.95 15.05 13.55 17.4 14 15.05 14.45 14.45 15.05 14 17.4 13.55 15.05 12.95 14.45 10.6 14 12.95 13.55 13.55 12.95 14 10.6Z'/%3E%3C/svg%3E"); /* @kind other */
  --canvas-dots-size: 28px 28px; /* @kind spacing */
  /* Solid star shape for masks (loader stars, motif tiles): background: <color>; mask: var(--star-mask) center / contain no-repeat; */
  --star-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='black' d='M14 4C15.3 10.7 17.3 12.7 24 14 17.3 15.3 15.3 17.3 14 24 12.7 17.3 10.7 15.3 4 14 10.7 12.7 12.7 10.7 14 4Z'/%3E%3C/svg%3E"); /* @kind other */

  /* ---- Spacing (4-pt base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* ---- Radii ---- */
  --radius-sm:        8px;
  --radius-input:     14px;
  --radius-card-sm:   15px;
  --radius-card:      25px;
  --radius-panel:     30px;
  --radius-modal:     40px;
  --radius-shell:     58px;
  --radius-pill:      999px;

  /* ---- Shadows ---- */
  --shadow-card:   0 16px 26px rgba(7, 8, 18, .20);
  --shadow-panel:  0 32px 80px rgba(20, 16, 54, .55);
  --shadow-hover:  0 22px 36px rgba(7, 8, 18, .32), 0 0 0 5px rgba(158, 160, 255, .045);
  --shadow-press:  0 6px 16px rgba(0, 0, 0, .16);
  --shadow-drag:   0 36px 56px rgba(5, 6, 14, .44), 0 0 54px rgba(147, 151, 255, .24);
  --shadow-glow:   0 0 0 6px rgba(177, 120, 255, .055); /* @kind shadow */

  /* ---- Scrim / backdrop — page dimming behind modals & sheets ---- */
  --scrim:        rgba(7, 8, 18, .62); /* @kind color */                /* default modal scrim */
  --scrim-strong: rgba(7, 8, 18, .80); /* @kind color */                /* destructive / focus-trap scrim */
  --scrim-blur:   blur(8px); /* @kind other */                          /* paired filter */

  /* ---- Inner highlight system ---- */
  --inner-hi:      inset 0 1px 0 rgba(255, 255, 255, .035); /* @kind shadow */
  --inner-stroke:  inset 0 0 0 2px rgba(146, 148, 229, .16); /* @kind shadow */
  --inner-pressed: inset 0 2px 6px rgba(0, 0, 0, .25); /* @kind shadow */

  /* ---- Focus / selected rings ---- */
  --ring-focus:    0 0 0 8px rgba(144, 148, 255, .08), inset 0 0 0 2px rgba(169, 173, 255, .34); /* @kind shadow */
  --ring-select:   inset 0 0 0 2px rgba(203, 207, 255, .55); /* @kind shadow */

  /* ---- Accent glows (use as outer haloes around selected pills, focused chips,
     hovered cards, badge attention moments). Pair the same hue's --accent-* fill
     with its matching glow recipe. ---- */
  --glow-lav:    0 0 0 6px rgba(169, 173, 255, .12), 0 14px 28px rgba(130, 137, 221, .26); /* @kind shadow */
  --glow-purple: 0 0 0 6px rgba(164, 107, 214, .14), 0 14px 28px rgba(143, 97, 201, .30); /* @kind shadow */
  --glow-pink:   0 0 0 6px rgba(217, 117, 142, .14), 0 14px 28px rgba(184, 92, 117, .26); /* @kind shadow */
  --glow-gold:   0 0 0 6px rgba(199, 161, 119, .14), 0 14px 28px rgba(168, 127, 79, .22); /* @kind shadow */

  /* ---- Motion -------------------------------------------------------
     Spring-first. Every curve below is a real damped spring sampled into
     linear() — nothing is a hand-tuned bezier. Three springs, one squish:
       soft    ζ.78  ~2% overshoot   hover, panels, generic state change
       spring  ζ.58  ~10% overshoot  pop, create, selection, release
       land    ζ.42  ~23% overshoot  drop landing only
       squish  sharp ease-in-out     press (the only non-spring)
     Motion is asymmetric: in is springy, out is quick and plain.
     ------------------------------------------------------------------- */
  --ease-soft:   linear(0, 0.048, 0.161, 0.301, 0.446, 0.58, 0.697, 0.792, 0.867, 0.922, 0.962, 0.989, 1.005, 1.015, 1.019, 1.02, 1.019, 1.016, 1.013, 1.01, 1.008, 1.006, 1.004, 1.002, 1.001, 1.001, 1, 1, 1); /* @kind other */
  --ease-spring: linear(0, 0.066, 0.222, 0.416, 0.611, 0.782, 0.917, 1.013, 1.072, 1.101, 1.107, 1.097, 1.079, 1.058, 1.038, 1.02, 1.007, 0.997, 0.992, 0.989, 0.989, 0.99, 0.992, 0.994, 0.996, 0.998, 1, 1, 1); /* @kind other */
  --ease-land:   linear(0, 0.087, 0.296, 0.555, 0.805, 1.009, 1.148, 1.219, 1.232, 1.203, 1.15, 1.089, 1.033, 0.988, 0.96, 0.947, 0.947, 0.955, 0.968, 0.983, 0.995, 1.005, 1.01, 1.013, 1.012, 1.01, 1.007, 1.003, 1); /* @kind other */
  --ease-squish: cubic-bezier(.3, 0, .2, 1); /* @kind other */      /* press down */
  --ease-exit:   cubic-bezier(.4, 0, 1, 1); /* @kind other */       /* dismiss — fast, no tail */
  --ease-linear: linear; /* @kind other */                          /* loaders, progress */
  /* aliases kept for older code */
  --ease-out:    var(--ease-soft); /* @kind other */
  --ease-pop:    var(--ease-spring); /* @kind other */
  --ease-bounce: var(--ease-land); /* @kind other */
  --ease-in:     var(--ease-exit); /* @kind other */

  --dur-press:   90ms; /* @kind other */    /* down: squish */
  --dur-release: 340ms; /* @kind other */   /* up: spring back */
  --dur-hover:   240ms; /* @kind other */   /* in: soft spring */
  --dur-leave:   160ms; /* @kind other */   /* out: plain */
  --dur-fast:    160ms; /* @kind other */
  --dur:         240ms; /* @kind other */
  --dur-exit:    140ms; /* @kind other */
  --dur-card:    300ms; /* @kind other */
  --dur-drop:    420ms; /* @kind other */
  --dur-create:  480ms; /* @kind other */
  --dur-pop:     440ms; /* @kind other */
  --dur-loader:  1400ms; /* @kind other */

  /* ready-made transition recipes */
  --motion-hover: transform var(--dur-hover) var(--ease-soft), box-shadow var(--dur-hover) var(--ease-soft), filter var(--dur-hover) var(--ease-soft), background var(--dur-hover) var(--ease-soft), color var(--dur-hover) var(--ease-soft); /* @kind other */
  --motion-press: transform var(--dur-press) var(--ease-squish), filter var(--dur-press) var(--ease-squish), box-shadow var(--dur-press) var(--ease-squish); /* @kind other */
  --motion-release: transform var(--dur-release) var(--ease-spring), filter var(--dur-leave) var(--ease-soft), box-shadow var(--dur-release) var(--ease-spring), background var(--dur-leave) var(--ease-soft), color var(--dur-leave) var(--ease-soft); /* @kind other */

  /* ---- Type: families ---- */
  --font-display: "Rubik", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Rubik", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Type: scale ---- */
  --type-display:    56px; /* @kind font */
  --type-h1:         32px; /* @kind font */
  --type-h2:         22px; /* @kind font */
  --type-h3:         17px; /* @kind font */
  --type-body:       15px; /* @kind font */
  --type-body-sm:    13px; /* @kind font */
  --type-label:      13px; /* @kind font */
  --type-eyebrow:    11px; /* @kind font */
  --type-mono:       13px; /* @kind font */

  /* ---- Type: line-heights ---- */
  --lh-tight:    1.05; /* @kind other */
  --lh-heading:  1.2; /* @kind other */
  --lh-body:     1.45; /* @kind other */
}

/* =========================================================================
   Semantic / element styling — drop these in by element or class.
   These are the defaults; overrides happen at the component level.
   ========================================================================= */

html, body {
  background: var(--bg-shell);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -.02em;
  color: var(--text);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -.015em;
  color: var(--text);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -.01em;
  color: var(--text);
}

.display {
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
  color: var(--text);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--text);
}

.body-sm {
  font-size: var(--type-body-sm);
}

.label {
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.muted     { color: var(--text-muted); }
.quiet     { color: var(--text-quiet); }

code, .mono, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  font-weight: 500;
  font-feature-settings: "tnum" 1, "ss01" 1;
  color: var(--text);
}

/* ---- Selection / focus ---- */
::selection { background: rgba(169, 173, 255, .35); color: var(--text); }

:where(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-input);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Interactive state recipe -------------------------------------------
   Opt any button / chip / card in with .lunery-tactile. Hover springs up,
   press squishes down fast, release springs back with overshoot.
   ------------------------------------------------------------------- */
.lunery-tactile { transition: var(--motion-release); will-change: transform; }
.lunery-tactile:hover:not(:disabled) { transform: translateY(-3px) scale(1.02); filter: brightness(1.06) saturate(1.04); transition: var(--motion-hover); }
.lunery-tactile:active:not(:disabled) { transform: translateY(1px) scale(.95); filter: brightness(1.1); transition: var(--motion-press); }

/* ---- Motion keyframes ----------------------------------------------------
   Each keyframe is a single straight line from → to; the SPRING does the
   shaping (overshoot lives in the curve, not in intermediate keyframes).
   Compose: animation: lunery-pop var(--dur-pop) var(--ease-spring) both;
   ------------------------------------------------------------------- */
@keyframes lunery-pop {
  from { transform: scale(.82); }
  to   { transform: scale(1); }
}
@keyframes lunery-create {
  from { transform: translateY(14px) scale(.5) rotate(-6deg); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
/* drop = fall, then squash-and-stretch on the landing spring */
@keyframes lunery-drop {
  0%   { transform: translateY(-26px) scale(.94, 1.08); opacity: .6; animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  38%  { transform: translateY(0) scale(1.12, .86); opacity: 1; animation-timing-function: var(--ease-land); }
  100% { transform: translateY(0) scale(1, 1); opacity: 1; }
}
@keyframes lunery-exit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(6px) scale(.9); }
}
/* loader: three mini stars twinkle in sequence (stagger 0 / 180 / 360ms) */
@keyframes lunery-twinkle {
  0%, 100% { transform: scale(.55) rotate(0deg);   opacity: .35; }
  45%      { transform: scale(1.15) rotate(90deg); opacity: 1;   }
}
@keyframes lunery-orbit { 0%, 100% { transform: scale(.55); opacity: .35; } 45% { transform: scale(1.15); opacity: 1; } }