/* openhour design tokens — dawn coral
   ------------------------------------------------------------------
   Rule of the system: coral is the brand, ink is the action.
   Coral 500 sits at roughly 2.6:1 on cream — beautiful as a sun,
   unusable as a button label. Buttons run ink-900 on light surfaces
   and coral-500 with dark text on dark surfaces. Coral-700 is the
   lightest coral that clears 4.5:1 on cream, so it carries all
   coral-coloured text and links.
   ------------------------------------------------------------------ */

:root {
  /* Coral — brand */
  --coral-50:  #FFF4EF;
  --coral-100: #FFE4D8;
  --coral-200: #FFCBB4;
  --coral-250: #FFB894;
  --coral-400: #FF9A70;
  --coral-500: #FF8A5B;   /* the sun */
  --coral-600: #F26A38;
  --coral-700: #D2521F;   /* lightest coral safe for text */
  --coral-800: #A63D14;
  --coral-900: #6E280C;

  /* Ink — night navy */
  --ink-50:  #F4F6FA;
  --ink-100: #E5E9F2;
  --ink-200: #C9D1E1;
  --ink-300: #A3AEC6;
  --ink-400: #7684A3;
  --ink-500: #55648A;
  --ink-600: #3E4C6E;
  --ink-700: #2C3855;
  --ink-800: #1F2946;
  --ink-900: #1A1A1A;

  /* Neutral — warm sand */
  --sand-50:  #FFF9F5;
  --sand-100: #F7EFE8;
  --sand-200: #EDE2D8;
  --sand-300: #DCCEC1;
  --sand-400: #B9A899;
  --sand-500: #8E7E70;
  --sand-600: #6B5D52;
  --sand-700: #4C4139;
  --sand-800: #322A25;
  --sand-900: #1C1714;

  /* Semantic — warmed so they don't clash with coral */
  --success: #0F9D74; --success-bg: #E4F6EF;
  --success-text: #0B7355;   /* success on light backgrounds — #0F9D74 is only ~3.4:1 */
  --warning-text: #8A6210;
  --danger-text:  #C13830;
  --info-text:    #1F5FB8;
  --warning: #E8A317; --warning-bg: #FDF3E0;
  --danger:  #E0483F; --danger-bg:  #FDEBEA;
  --info:    #2E7FE6; --info-bg:    #E8F1FD;

  /* Data series, in order */
  --data-1: #FF8A5B;
  --data-2: #2C3855;
  --data-3: #0F9D74;
  --data-4: #FFB894;
  --data-5: #7684A3;
  --data-6: #E8A317;

  /* Roles — light */
  --bg-canvas: #FFFDFB;
  --bg-subtle: var(--sand-50);
  --bg-sunken: var(--sand-100);
  --border: var(--sand-200);
  --border-strong: #DCD6CF;   /* form controls and secondary buttons only */
  --border-strong: var(--sand-300);
  --text-primary: #1A1A1A;
  --text-secondary: #5C5C5C;
  --text-muted: #8E8E8E;

  --brand: var(--coral-500);

  /* Coral as a SURFACE is permitted in these four decorative roles only.
     Not buttons, not chips, not nav, not any control. If a new case appears
     that isn't one of these, it goes to brand — don't extend this list. */
  --decor-illustration: var(--coral-500);   /* empty-state and onboarding art */
  --decor-ornament:     var(--coral-500);   /* rules, accent shapes, section marks */
  --decor-celebration:  var(--coral-500);   /* booking-confirmed, waitlist-promoted */
  --decor-availability: var(--coral-500);   /* "free this week" indicators */
  --action: #3A3273;
  --action-hover: #2D2760;
  --action-active: #1A1A1A;
  --action-text: #FFF9F5;
  --accent-text: var(--coral-700);
  --accent-subtle-bg: var(--coral-100);
  --focus-ring: #3A3273;

  /* Type */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Radius and elevation */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.09);
  --shadow-lg: 0 12px 32px rgba(110, 40, 12, 0.13);
}

/* DEFERRED — not in scope for v1. Opt-in only, so it cannot activate
   automatically on a device set to dark. Pair with
   <meta name="color-scheme" content="light"> in the document head. */
[data-theme="dark"] {
    --bg-canvas: #141127;
    --bg-subtle: #1C1834;
    --bg-sunken: #0E0C1C;
    --border: #2C2652;
    --border-strong: var(--ink-700);
    --text-primary: #EDEDED;
    --text-secondary: #A8A8A8;
    --text-muted: #808080;

    --brand: var(--coral-500);

  /* Coral as a SURFACE is permitted in these four decorative roles only.
     Not buttons, not chips, not nav, not any control. If a new case appears
     that isn't one of these, it goes to brand — don't extend this list. */
  --decor-illustration: var(--coral-500);   /* empty-state and onboarding art */
  --decor-ornament:     var(--coral-500);   /* rules, accent shapes, section marks */
  --decor-celebration:  var(--coral-500);   /* booking-confirmed, waitlist-promoted */
  --decor-availability: var(--coral-500);   /* "free this week" indicators */
    --action: var(--coral-500);
    --action-hover: var(--coral-400);
    --action-active: var(--coral-250);
    --action-text: #2A1206;        /* dark text on coral, not white */
    --accent-text: var(--coral-250);
    --accent-subtle-bg: #3A2114;
    --focus-ring: var(--coral-400);

    --success-bg: rgba(15, 157, 116, 0.16);
    --warning-bg: rgba(232, 163, 23, 0.16);
    --danger-bg:  rgba(224, 72, 63, 0.16);
    --info-bg:    rgba(46, 127, 230, 0.16);
  }
}

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px;
  border:1px solid transparent; border-radius:var(--radius-md);
  font:inherit; font-size:14px; font-weight:500; cursor:pointer;
  transition:background-color 120ms ease, border-color 120ms ease; }
.btn-primary { background:var(--action); color:var(--action-text); }
.btn-primary:hover { background:var(--action-hover); }
.btn-secondary { background:var(--bg-canvas); border-color:var(--border-strong); color:var(--text-primary); }
.btn-secondary:hover { border-color:var(--action); }
.btn-ghost { background:transparent; color:var(--accent-text); }
.btn-ghost:hover { background:var(--accent-subtle-bg); }

.link { color:var(--accent-text); text-underline-offset:3px; }

.tag { display:inline-block; padding:3px 11px; border-radius:999px;
  font-size:12px; font-weight:500;
  background:var(--accent-subtle-bg); color:var(--coral-800); }
.tag-success { background:var(--success-bg); color:var(--success); }
.tag-warning { background:var(--warning-bg); color:#8A6210; }
.tag-danger  { background:var(--danger-bg);  color:var(--danger); }

.card { background:var(--bg-canvas); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline:2px solid var(--focus-ring); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}