/* ============================================================================
   Fresas / Morritos Snacks POS — design tokens + base layer
   "Mercado premium" aesthetic — strawberry orchard palette, Fraunces italic
   display, Outfit body, Newsreader italic for money. Self-hosted WOFF2.
   Variable names from the original token system are preserved so existing
   pos.css / admin.css / pos.js inline styles keep working.
   ============================================================================ */

@layer base, components, utilities;

@layer base {
  /* ── Self-hosted variable fonts (already in /static/fonts/) ── */
  @font-face {
    font-family: 'Fraunces';
    src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Fraunces';
    src: url('/static/fonts/fraunces-italic-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Outfit';
    src: url('/static/fonts/outfit-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Newsreader';
    src: url('/static/fonts/newsreader-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
  }

  :root {
    /* ── Strawberry orchard palette (oklch, color-mix safe) ── */
    --strawberry:        oklch(60% 0.24 18);
    --strawberry-bright: oklch(67% 0.26 22);
    --strawberry-deep:   oklch(38% 0.20 22);
    --strawberry-blood:  oklch(28% 0.16 25);
    --cream:             oklch(96% 0.025 85);
    --cream-warm:        oklch(93% 0.04 70);
    --pulp:              oklch(89% 0.08 45);
    --pulp-deep:         oklch(78% 0.13 50);
    --cocoa:             oklch(22% 0.05 50);
    --cocoa-soft:        oklch(35% 0.04 55);
    --leaf:              oklch(58% 0.16 145);
    --mint:              oklch(76% 0.12 155);
    --gold:              oklch(82% 0.14 80);
    --seed:              oklch(78% 0.04 90);

    /* ── Legacy tokens — preserved for compatibility ── */
    --c-bg:        var(--cream);
    --c-surface:   oklch(100% 0 0);
    --c-ink:       var(--cocoa);
    --c-ink-soft:  var(--cocoa-soft);
    --c-line:      oklch(88% 0.02 60);
    --c-accent:    var(--strawberry);
    --c-accent-d:  var(--strawberry-deep);
    --c-ok:        var(--leaf);
    --c-warn:      var(--gold);
    --c-danger:    var(--strawberry);
    --c-comp:      var(--leaf);

    /* ── Radii ── */
    --r-sm: 10px;
    --r:    14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* ── Spacing rhythm (legacy + new fluid scale) ── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    --s1: clamp(.25rem, .25rem + .1vw, .375rem);
    --s2: clamp(.5rem,  .5rem + .2vw, .75rem);
    --s3: clamp(.75rem, .75rem + .3vw, 1rem);
    --s4: clamp(1rem,   1rem + .5vw, 1.5rem);
    --s5: clamp(1.5rem, 1.5rem + 1vw, 2.5rem);
    --s6: clamp(2.5rem, 2.5rem + 2vw, 4rem);

    /* ── Type ── */
    --t-display: 'Fraunces', 'Times New Roman', serif;
    --t-body:    'Outfit', system-ui, -apple-system, sans-serif;
    --t-serif:   'Newsreader', Georgia, serif;
    --t-brand:   'Fraunces', 'Times New Roman', serif;

    /* ── Shadows — warm, layered ── */
    --shadow-1: 0 1px 2px oklch(20% 0.1 25 / 0.06), 0 2px 6px oklch(20% 0.1 25 / 0.05);
    --shadow-2: 0 4px 12px oklch(20% 0.1 25 / 0.10), 0 12px 32px oklch(20% 0.1 25 / 0.08);
    --shadow-lg: 0 12px 28px oklch(20% 0.1 25 / 0.14), 0 32px 64px oklch(20% 0.1 25 / 0.10);
    --shadow-glow: 0 0 0 1px oklch(60% 0.24 18 / 0.15), 0 8px 24px oklch(60% 0.24 18 / 0.30);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0;
    min-block-size: 100svh;
    font-family: var(--t-body);
    font-size: clamp(14px, 0.95rem + 0.1vw, 16px);
    line-height: 1.5;
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    font-synthesis: none;
  }

  a { color: var(--c-accent-d); text-decoration: none; }
  a:hover { text-decoration: underline; }
  button { font: inherit; color: inherit; cursor: pointer; }

  h1, h2, h3 {
    line-height: 1.05;
    margin: 0 0 var(--sp-3);
    font-family: var(--t-display);
    font-weight: 700;
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    letter-spacing: -.02em;
    color: var(--c-ink);
  }
  h1 { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); }
  h2 { font-size: clamp(1.25rem, 1rem + .5vw, 1.5rem); }
  h3 { font-size: 1.125rem; }

  p { margin: 0 0 var(--sp-3); text-wrap: pretty; }

  ::selection { background: var(--strawberry); color: var(--cream); }

  /* Focus visible everywhere (accessibility) */
  :focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    border-radius: 6px;
  }
}

@layer components {
  /* ── Brand header (shared, reskinned) ── */
  .brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: var(--c-surface);
    border-block-end: 1px solid var(--c-line);
    box-shadow: var(--shadow-1);
    min-block-size: 56px;
  }
  .brand__logo {
    font-family: var(--t-brand);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    letter-spacing: -0.02em;
    font-size: 1.35rem;
    color: var(--c-ink);
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-inline-size: 0;
  }
  .brand__logo b { color: var(--c-accent); font-weight: 800; }
  .brand__sub {
    color: var(--c-ink-soft);
    font-family: var(--t-body);
    font-style: normal;
    font-weight: 500;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
  @media (max-width: 420px) {
    /* hide subtitle on very narrow phones so the header doesn't wrap */
    .brand__sub { display: none; }
  }
  .brand__who {
    display: flex; gap: 6px; align-items: center;
    font-size: 0.78rem; color: var(--c-ink-soft);
    font-family: var(--t-body);
    flex: none;
  }
  .brand__who > span {
    /* "Hola, Owner" — hide greeting on narrow, show only name inline */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 12ch;
  }
  @media (max-width: 480px) {
    .brand__who > span { display: none; }
  }
  .brand__who b { color: var(--c-ink); font-weight: 600; }
  .brand__logout,
  .brand__admin {
    padding: 6px 12px;
    border-radius: var(--r-pill);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
    min-block-size: 32px;
    display: inline-flex;
    align-items: center;
    transition: background 120ms ease, border-color 120ms ease;
  }
  .brand__logout {
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-ink);
  }
  .brand__logout:hover {
    text-decoration: none;
    background: var(--cream-warm);
    border-color: var(--c-accent);
  }
  .brand__admin {
    background: var(--c-ink);
    color: var(--c-surface);
    border: 1px solid var(--c-ink);
  }

  /* ── Buttons — tactile, rounded, mobile-first tap targets ── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    padding: 14px 20px;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: var(--t-body);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    min-block-size: 48px;
    box-shadow: var(--shadow-1);
    transition: background 120ms ease, transform 80ms ease,
                box-shadow 120ms ease, border-color 120ms ease;
  }
  .btn:hover { background: var(--cream-warm); border-color: color-mix(in oklch, var(--c-accent), transparent 60%); }
  .btn:active { transform: translateY(1px); }
  .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

  .btn--primary {
    background: var(--c-accent);
    color: var(--cream);
    border-color: var(--c-accent);
    box-shadow:
      0 1px 0 oklch(100% 0 0 / .2) inset,
      0 6px 16px oklch(60% 0.24 18 / .35);
  }
  .btn--primary:hover {
    background: var(--strawberry-bright);
    border-color: var(--strawberry-bright);
  }

  .btn--danger { background: var(--c-danger); color: var(--cream); border-color: var(--c-danger); }
  .btn--ghost  { background: transparent; box-shadow: none; }
  .btn--lg {
    padding: 18px 26px;
    font-size: 1rem;
    min-block-size: 58px;
  }

  /* ── Inputs ── */
  .input, select.input, textarea.input {
    inline-size: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r);
    background: var(--c-surface);
    font: inherit;
    color: var(--c-ink);
    min-block-size: 48px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }
  .input:focus, select.input:focus, textarea.input:focus {
    border-color: var(--c-accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-accent), transparent 80%);
  }

  /* ── Cards ── */
  .card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    padding: var(--sp-4);
    box-shadow: var(--shadow-1);
  }

  /* ── Error banner ── */
  .err {
    padding: var(--sp-3) var(--sp-4);
    background: oklch(95% 0.04 25);
    border: 1px solid oklch(75% 0.1 25);
    border-radius: var(--r);
    color: var(--strawberry-deep);
    margin-block-end: var(--sp-4);
    font-weight: 500;
  }

  /* ── Notice ── */
  .notice {
    padding: var(--sp-3) var(--sp-4);
    background: oklch(95% 0.05 150);
    border: 1px solid oklch(75% 0.1 150);
    border-radius: var(--r);
    color: oklch(35% 0.15 150);
    margin-block-end: var(--sp-4);
  }
}

@layer utilities {
  .stack > * + * { margin-block-start: var(--sp-4); }
  .row { display: flex; gap: var(--sp-3); align-items: center; }
  .row--end { justify-content: flex-end; }
  .muted { color: var(--c-ink-soft); }
  .right { text-align: end; }
  .mono { font-variant-numeric: tabular-nums; }
  .money {
    font-family: var(--t-serif);
    font-style: italic;
    font-weight: 400;
    font-variant-numeric: lining-nums;
  }
  .hidden { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}