/* ============================================================
   VENUESTORY - Manager Mobile · Design Tokens
   Warm-neutral (stone) foundation + terracotta primary.
   Light is default; [data-theme="dark"] flips semantic tokens.
   ============================================================ */

/* Fonts are self-hosted: see styles/fonts.css */

:root {
  /* ---- Brand / accent ramp (terracotta) ---- */
  --terracotta-50:  #FCF1EC;
  --terracotta-100: #F8DDD1;
  --terracotta-200: #F1BBA3;
  --terracotta-300: #E89274;
  --terracotta-400: #E0714D;
  --terracotta-500: #D9542E;   /* core */
  --terracotta-600: #BF4624;
  --terracotta-700: #9C381D;
  --terracotta-800: #7C2D18;
  --terracotta-900: #5E2313;

  /* ---- Warm neutral ramp (stone) ---- */
  --stone-0:   #FFFFFF;
  --stone-50:  #FAF8F5;
  --stone-100: #F4F1EC;
  --stone-150: #ECE7E0;
  --stone-200: #E4DED5;
  --stone-300: #D2C9BC;
  --stone-400: #AfA597;
  --stone-500: #897F70;
  --stone-600: #6B6253;   /* muted text on light */
  --stone-700: #4E463A;
  --stone-800: #332E26;
  --stone-900: #211D17;
  --stone-950: #18150F;

  /* ---- Functional hues (shared) ---- */
  --green-100: #DCEEE3;  --green-500: #2E7D5B;  --green-600: #246349;  --green-700:#1C4D39;
  --amber-100: #F6EBCF;  --amber-500: #C08A21;  --amber-600: #9C6F18;
  --red-100:   #F8DAD6;  --red-500:   #CB4439;  --red-600:   #A8352C;
  --blue-100:  #DCE7F6;  --blue-500:  #3B6FD4;  --blue-600:  #2C57AD;

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 15px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --r-full: 999px;

  /* ---- Spacing (4pt) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px;

  /* ---- Type ---- */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  --t-display: 30px;   --lh-display: 34px;   --ls-display: -0.02em;
  --t-h1: 24px;        --lh-h1: 29px;        --ls-h1: -0.02em;
  --t-h2: 20px;        --lh-h2: 25px;        --ls-h2: -0.015em;
  --t-title: 17px;     --lh-title: 22px;     --ls-title: -0.01em;
  --t-body: 15px;      --lh-body: 21px;      --ls-body: -0.006em;
  --t-sub: 14px;       --lh-sub: 19px;
  --t-label: 13px;     --lh-label: 16px;
  --t-caption: 12px;   --lh-caption: 15px;
  --t-micro: 11px;     --lh-micro: 14px;     --ls-micro: 0.02em;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* =============== LIGHT (default) =============== */
:root, [data-theme="light"] {
  --bg:            var(--stone-50);
  --bg-elevated:   var(--stone-100);
  --surface:       var(--stone-0);
  --surface-muted: var(--stone-100);
  --surface-sunken: var(--stone-150);

  --fg:            var(--stone-900);
  --fg-muted:      var(--stone-600);
  --fg-subtle:     var(--stone-500);

  --border:        var(--stone-200);
  --border-strong: var(--stone-300);

  --primary:        var(--terracotta-500);
  --primary-hover:  var(--terracotta-600);
  --primary-press:  var(--terracotta-700);
  --on-primary:     #FFFFFF;
  --primary-soft:   var(--terracotta-50);
  --primary-soft-fg:var(--terracotta-700);
  --ring:           var(--terracotta-300);

  --success:    var(--green-500);  --success-soft: var(--green-100);  --success-fg: var(--green-700);
  --warning:    var(--amber-500);  --warning-soft: var(--amber-100);  --warning-fg: var(--amber-600);
  --destructive:var(--red-500);    --destructive-soft: var(--red-100); --destructive-fg: var(--red-600);
  --info:       var(--blue-500);   --info-soft: var(--blue-100);      --info-fg: var(--blue-600);

  --shadow-color: 30 25 18;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.06), 0 1px 1px rgb(var(--shadow-color) / 0.04);
  --shadow-md: 0 2px 5px rgb(var(--shadow-color) / 0.07), 0 1px 2px rgb(var(--shadow-color) / 0.05);
  --shadow-lg: 0 10px 24px -6px rgb(var(--shadow-color) / 0.12), 0 4px 8px -4px rgb(var(--shadow-color) / 0.08);
  --shadow-sheet: 0 -8px 30px -8px rgb(var(--shadow-color) / 0.16);

  --scrim: rgb(28 24 16 / 0.42);
}

/* =============== DARK =============== */
[data-theme="dark"] {
  --bg:            var(--stone-950);
  --bg-elevated:   #1F1B15;
  --surface:       #221E18;
  --surface-muted: #2A251D;
  --surface-sunken: #1A1711;

  --fg:            #F6F2EA;
  --fg-muted:      #ADA496;
  --fg-subtle:     #837A6B;

  --border:        #352F26;
  --border-strong: #463F33;

  --primary:        var(--terracotta-400);
  --primary-hover:  var(--terracotta-300);
  --primary-press:  var(--terracotta-200);
  --on-primary:     #2B1409;
  --primary-soft:   #2E1D13;
  --primary-soft-fg:var(--terracotta-300);
  --ring:           var(--terracotta-500);

  --success:    #57B488;  --success-soft: #16271F;  --success-fg: #7FCDA4;
  --warning:    #D9A441;  --warning-soft: #2A2210;  --warning-fg: #E4BC6B;
  --destructive:#E06A5C;  --destructive-soft: #2C1714; --destructive-fg: #ED8D81;
  --info:       #6E9CE6;  --info-soft: #161F2C;     --info-fg: #93B5EC;

  --shadow-color: 0 0 0;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.55);
  --shadow-sheet: 0 -8px 30px -8px rgb(0 0 0 / 0.6);

  --scrim: rgb(0 0 0 / 0.6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Interactive elements get a pointer (web-app continuity rule) */
button, a, [role="button"], select, summary, label[for], .interactive { cursor: pointer; }

/* App not yet live - store download buttons hidden site-wide (remove this block to re-enable) */
.store-badges, .hero-stores, .cta-stores, .ft-stores, .ft-col.ft-app { display: none !important; }