/* ===== Google Fonts + design-system tokens (from Claude Design export) ===== */

/* Peluquería Fermín — Webfonts
   Chosen from Google Fonts (no brand font files were provided).
   - Big Shoulders Display : industrial condensed display for impact headlines
   - Cormorant Garamond   : elegant serif for premium accents / numerals
   - Archivo               : grotesque UI + body
   - Space Mono            : labels, prices, coordinates
   If the shop has licensed fonts, drop the .woff2 files in and replace these. */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:opsz,wght@10..72,400..900&family=Archivo:ital,wght@0,300..900;1,400..700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Space+Mono:wght@400;700&display=swap');


/* Peluquería Fermín — Color System
   Black-dominant, white detail, gold/copper premium accent. */

:root {
  /* ===== Ink ramp (near-black surfaces) ===== */
  --ink-950: #08080A;   /* page void */
  --ink-900: #0C0D0F;   /* base background */
  --ink-850: #111214;   /* raised surface */
  --ink-800: #17181B;   /* card surface */
  --ink-750: #1E2024;   /* elevated / hover surface */
  --ink-700: #26282D;   /* strokes on dark, inputs */
  --ink-600: #34373D;

  /* ===== Bone / white ramp (text + detail) ===== */
  --bone-050: #FAF8F5;  /* primary text on dark */
  --bone-100: #F1EEE8;
  --bone-200: #DAD6CD;
  --bone-300: #B4AFA4;
  --bone-400: #857F73;  /* muted / captions */
  --bone-500: #5C574E;

  /* ===== Gold / copper accent ramp ===== */
  --gold-200: #F0DCA8;
  --gold-300: #E9C888;
  --gold-400: #D9A94E;
  --gold-500: #C6913E;  /* primary accent */
  --gold-600: #A6742C;
  --gold-700: #7C531D;
  --copper:   #B87333;

  /* ===== Semantic ===== */
  --success: #6FB06A;
  --danger:  #D8523E;
  --warning: #E0A93D;

  /* ===== Aliases (use these in components) ===== */
  --bg:            var(--ink-900);
  --bg-void:       var(--ink-950);
  --surface:       var(--ink-800);
  --surface-raised:var(--ink-850);
  --surface-hover: var(--ink-750);
  --surface-input: var(--ink-750);

  --text:          var(--bone-050);
  --text-strong:   #FFFFFF;
  --text-muted:    var(--bone-400);
  --text-subtle:   var(--bone-300);
  --text-on-gold:  var(--ink-950);

  --accent:        var(--gold-500);
  --accent-bright: var(--gold-400);
  --accent-deep:   var(--gold-700);

  --border:        rgba(250, 248, 245, 0.09);
  --border-strong: rgba(250, 248, 245, 0.18);
  --border-gold:   rgba(198, 145, 62, 0.45);

  --overlay:       rgba(8, 8, 10, 0.72);

  /* Gradients / protection scrims */
  --scrim-bottom: linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,0.55) 55%, rgba(8,8,10,0.95) 100%); /* @kind other */
  --scrim-top:    linear-gradient(180deg, rgba(8,8,10,0.85) 0%, rgba(8,8,10,0) 100%); /* @kind other */
  --gold-sheen:   linear-gradient(105deg, var(--gold-600) 0%, var(--gold-300) 45%, var(--gold-500) 55%, var(--gold-600) 100%); /* @kind other */
}


/* Peluquería Fermín — Typography System */

:root {
  /* Families */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-body:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Weights */
  --w-light: 300;    /* @kind font */
  --w-regular: 400;  /* @kind font */
  --w-medium: 500;   /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold: 700;     /* @kind font */
  --w-black: 900;    /* @kind font */

  /* Display scale (condensed, uppercase headlines) */
  --fs-hero:    clamp(4rem, 11vw, 10rem);   /* @kind font */
  --fs-display: clamp(3rem, 7vw, 6rem);     /* @kind font */
  --fs-h1:      clamp(2.25rem, 4.5vw, 3.75rem); /* @kind font */
  --fs-h2:      clamp(1.75rem, 3vw, 2.5rem);    /* @kind font */
  --fs-h3:      1.5rem;   /* @kind font */
  --fs-h4:      1.25rem;  /* @kind font */

  /* Body scale */
  --fs-lead:    1.25rem;   /* @kind font */
  --fs-body:    1rem;      /* @kind font */
  --fs-sm:      0.875rem;  /* @kind font */
  --fs-xs:      0.75rem;   /* @kind font */

  /* Label / overline (mono, tracked-out) */
  --fs-label:   0.75rem;       /* @kind font */
  --tracking-label: 0.22em;    /* @kind other */
  --tracking-display: -0.01em; /* @kind other */
  --tracking-wide: 0.06em;     /* @kind other */

  /* Line heights */
  --lh-tight: 0.92;    /* @kind other */
  --lh-heading: 1.05;  /* @kind other */
  --lh-snug: 1.3;      /* @kind other */
  --lh-body: 1.6;      /* @kind other */
}


/* Peluquería Fermín — Spacing, radius, layout */

:root {
  /* 4px base scale */
  --sp-1: 0.25rem;   /* 4  */
  --sp-2: 0.5rem;    /* 8  */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 3rem;      /* 48 */
  --sp-8: 4rem;      /* 64 */
  --sp-9: 6rem;      /* 96 */
  --sp-10: 8rem;     /* 128 */

  /* Radii — mostly sharp/architectural; small softening only */
  --r-none: 0; /* @kind radius */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Layout */
  --container: 1240px;         /* @kind other */
  --container-narrow: 820px;   /* @kind other */
  --gutter: clamp(1.25rem, 4vw, 4rem); /* @kind spacing */
}


/* Peluquería Fermín — Effects: shadows, blur, motion */

:root {
  /* Shadows — deep, soft, for lifting cards off black */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --shadow-gold: 0 8px 30px rgba(198,145,62,0.28);
  --ring-gold: 0 0 0 1px var(--gold-500), 0 8px 30px rgba(198,145,62,0.25);

  /* Blur (glass overlays) */
  --blur-sm: blur(6px);   /* @kind other */
  --blur-md: blur(14px);  /* @kind other */
  --blur-lg: blur(24px);  /* @kind other */
  --glass: rgba(12,13,15,0.62); /* @kind color */

  /* Motion — energetic but premium */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);   /* @kind other */
  --dur-fast: 0.18s;   /* @kind other */
  --dur-base: 0.32s;   /* @kind other */
  --dur-slow: 0.6s;    /* @kind other */
  --dur-reveal: 0.9s;  /* @kind other */
}

/* Reusable brand keyframes (used by cards, UI kits, slides) */
@keyframes fmn-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fmn-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fmn-sheen {
  0%   { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}
@keyframes fmn-scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes fmn-pole {
  from { background-position: 0 0; }
  to   { background-position: 0 -56px; }
}
@keyframes fmn-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}


/* Peluquería Fermín — Design System entry point.
   Consumers link ONLY this file. Import order matters. */

@import url('./tokens/fonts.css');
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/spacing.css');
@import url('./tokens/effects.css');


/* ===== design global styles (helmet) ===== */


  body { margin:0; background:var(--ink-900); }
  a { color:var(--gold-400); text-decoration:none; }
  a:hover { color:var(--gold-300); }
  * { box-sizing:border-box; }
  .grain { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  @keyframes fmn-kenburns { from { transform:scale(1.05); } to { transform:scale(1.15); } }


/* ===== safety ===== */

.sc-interp{display:inline;} html{scroll-behavior:smooth;}