/* ==========================================================================
   Rufino Studio · Cinéma Gallery — Design System v6.0 · DEFINITIVO
   tokens.css — palette · type scale · spacing · radii · motion · elevation
   --------------------------------------------------------------------------
   Load order:  tokens.css → components.css → utilities.css
   Cascade layers declared here once; every file contributes to its own layer.
   ========================================================================== */

@layer reset, base, components, utilities;

/* --------------------------------------------------------------------------
   ROOT TOKENS  ·  unlayered so they resolve everywhere
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* ---- COLOR · accent — Rufino Gold (muted, jewelry-like) ---------------- */
  --rf-gold:          #C99A48;
  --rf-gold-hover:    #D4AD6A;
  --rf-gold-pressed:  #A67C32;
  --rf-gold-08:       rgba(201, 154, 72, .08);
  --rf-gold-12:       rgba(201, 154, 72, .12);
  --rf-gold-15:       rgba(201, 154, 72, .15);
  --rf-gold-25:       rgba(201, 154, 72, .25);
  --rf-gold-40:       rgba(201, 154, 72, .40);

  /* ---- COLOR · surfaces — the dark canvas family ------------------------ */
  --rf-canvas:        #0E0E10;   /* dominant base */
  --rf-elevated:      #141416;   /* cards, nav-on-scroll, inputs */
  --rf-sunken:        #09090B;   /* footer, CTA-closer base */
  --rf-void:          #000000;   /* cinemascope letterbox / video only */
  --rf-chip:          rgba(230, 230, 230, .06);

  /* ---- COLOR · foreground — off-white, never pure #FFF ------------------ */
  --rf-ink:           #E6E6E6;
  --rf-ink-muted:     #A6A6A6;
  --rf-ink-faint:     #6B6B6B;
  --rf-on-gold:       #0E0E10;

  /* ---- COLOR · hairlines ------------------------------------------------ */
  --rf-hairline-faint:  rgba(166, 166, 166, .08);
  --rf-hairline:        rgba(166, 166, 166, .14);
  --rf-hairline-strong: rgba(166, 166, 166, .34);

  /* ---- COLOR · semantic aliases ----------------------------------------- */
  --rf-link:          var(--rf-gold-hover);
  --rf-focus:         var(--rf-gold);

  /* ---- TYPE · families -------------------------------------------------- */
  --rf-font-display:  'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --rf-font-body:     'Montserrat', 'Helvetica Neue', system-ui, sans-serif;

  /* ---- TYPE · parametrizable body size (A/B: 15 / 16 / 17 / 18 / 20) ----- */
  --rf-body-size:     1.125rem;   /* 18px — DEFAULT */

  /* ---- TYPE · fluid scale — a dramatic, very marked hierarchy ------------ */
  /*   clamp(min, base + vw, max)  ·  min = mobile, max = desktop            */
  --rf-fs-hero:     clamp(4rem,    2.30rem + 7.20vw, 8.25rem);  /*  64 → 132 */
  --rf-fs-display:  clamp(3rem,    1.95rem + 4.45vw, 5.75rem);  /*  48 →  92 */
  --rf-fs-h2:       clamp(2.125rem,1.40rem + 3.10vw, 3.75rem);  /*  34 →  60 */
  --rf-fs-h3:       clamp(1.5rem,  1.21rem + 1.24vw, 2.125rem); /*  24 →  34 */
  --rf-fs-tagline:  clamp(1.25rem, 1.12rem + 0.55vw,1.5625rem); /*  20 →  25 */
  --rf-fs-lead:     clamp(1.25rem, 1.03rem + 0.95vw,1.6875rem); /*  20 →  27 */
  --rf-fs-body-lg:  1.25rem;                                    /*  20 */
  --rf-fs-body:     var(--rf-body-size);                        /*  18 */
  --rf-fs-body-sm:  1rem;                                       /*  16 */
  --rf-fs-caption:  0.875rem;                                   /*  14 */
  --rf-fs-overline: 0.8125rem;                                  /*  13 */
  --rf-fs-micro:    0.75rem;                                    /*  12 */
  --rf-fs-credit:   clamp(5rem,    3rem + 5vw,      7rem);      /*  80 → 112 credit numbers */
  --rf-fs-quote:    clamp(11rem,   2rem + 24vw,    22rem);      /* giant quote mark */

  /* ---- TYPE · weights --------------------------------------------------- */
  --rf-w-light:   300;
  --rf-w-regular: 400;
  --rf-w-medium:  500;
  --rf-w-bold:    700;

  /* ---- TYPE · line-heights & tracking ----------------------------------- */
  --rf-lh-hero:   0.98;
  --rf-lh-tight:  1.06;
  --rf-lh-snug:   1.2;
  --rf-lh-body:   1.62;
  --rf-ls-hero:   -0.02em;
  --rf-ls-display:-0.015em;
  --rf-ls-h2:     -0.01em;
  --rf-ls-body:   0.005em;
  --rf-ls-overline:0.28em;
  --rf-ls-button: 0.16em;

  /* ---- SPACE ------------------------------------------------------------ */
  --rf-sp-3xs: 0.25rem;   /*  4 */
  --rf-sp-2xs: 0.5rem;    /*  8 */
  --rf-sp-xs:  0.75rem;   /* 12 */
  --rf-sp-sm:  1rem;      /* 16 */
  --rf-sp-md:  1.5rem;    /* 24 */
  --rf-sp-lg:  2.5rem;    /* 40 */
  --rf-sp-xl:  4rem;      /* 64 */
  --rf-sp-2xl: 6rem;      /* 96 */
  /* fluid section padding: 64px (mobile) → 120px (desktop) */
  --rf-section: clamp(4rem, 2.4rem + 6.8vw, 7.5rem);
  --rf-gutter:  clamp(1.25rem, 0.4rem + 3.4vw, 5rem);
  --rf-maxw:    1320px;
  --rf-maxw-text: 760px;

  /* ---- SHAPE ------------------------------------------------------------ */
  --rf-r-xs:   2px;
  --rf-r-sm:   4px;
  --rf-r-md:   8px;     /* DEFAULT — cards, inputs, photo frames */
  --rf-r-lg:   14px;    /* large editorial panels */
  --rf-r-pill: 9999px;  /* CTAs, badges, filter chips ONLY */

  /* ---- MOTION ----------------------------------------------------------- */
  --rf-ease:        cubic-bezier(.2, .7, .2, 1);
  --rf-ease-cinema: cubic-bezier(.65, 0, .35, 1);
  --rf-dur-fast:    180ms;
  --rf-dur-base:    320ms;
  --rf-dur-slow:    620ms;

  /* ---- ELEVATION · one shadow, for photographs only --------------------- */
  --rf-shadow-photo:      0 32px 70px -28px rgba(0, 0, 0, .92);
  --rf-shadow-photo-hero: 0 48px 110px -36px rgba(0, 0, 0, .95);
  --rf-ring-gold:         0 0 0 2px var(--rf-gold-40);
  --rf-glow-gold:         0 0 36px var(--rf-gold-15);

  /* ---- CINÉMA · aspect ratios ------------------------------------------- */
  --rf-cinemascope: 2.39;
  --rf-aspect-3-2:  1.5;
  --rf-aspect-4-5:  0.8;

  /* ---- CINÉMA · film-grain texture (inline SVG fractal noise) ----------- */
  --rf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A/B body-size overrides — toggle on <html> or <body> ---------------------- */
.rf-body-15 { --rf-body-size: 0.9375rem; }
.rf-body-16 { --rf-body-size: 1rem; }
.rf-body-17 { --rf-body-size: 1.0625rem; }
.rf-body-18 { --rf-body-size: 1.125rem; }
.rf-body-20 { --rf-body-size: 1.25rem; }

/* Mobile steps body down one notch for portrait legibility ------------------ */
@media (max-width: 40em) {
  :root { --rf-body-size: 1.0625rem; }   /* 18 → 17 */
  .rf-body-15 { --rf-body-size: 0.9375rem; }
  .rf-body-20 { --rf-body-size: 1.1875rem; }
}

/* --------------------------------------------------------------------------
   RESET  ·  scoped to element types — no global * reset
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd,
  ul, ol { margin: 0; }

  :where(ul, ol):where([class]) { padding: 0; list-style: none; }

  :where(img, picture, svg, video) {
    display: block;
    max-inline-size: 100%;
    height: auto;
  }

  :where(button, input, select, textarea) { font: inherit; color: inherit; }

  :where(button) { cursor: pointer; background: none; border: 0; }

  :where(a) { color: inherit; text-decoration: none; }

  @media (prefers-reduced-motion: reduce) {
    :where(*) {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* --------------------------------------------------------------------------
   BASE  ·  element defaults — the typographic foundation
   -------------------------------------------------------------------------- */
@layer base {
  html {
    /* smooth height interpolation for native <details> accordions */
    interpolate-size: allow-keywords;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    background: var(--rf-canvas);
    color: var(--rf-ink);
    font-family: var(--rf-font-body);
    font-size: var(--rf-fs-body);
    font-weight: var(--rf-w-light);
    line-height: var(--rf-lh-body);
    letter-spacing: var(--rf-ls-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    text-transform: uppercase;
    line-height: var(--rf-lh-tight);
    color: var(--rf-ink);
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  a {
    color: var(--rf-link);
    transition: color var(--rf-dur-base) var(--rf-ease);
  }
  a:hover { color: var(--rf-gold); }

  strong, b { font-weight: var(--rf-w-medium); }

  ::selection { background: var(--rf-gold); color: var(--rf-on-gold); }

  :focus-visible {
    outline: 2px solid var(--rf-focus);
    outline-offset: 3px;
    border-radius: var(--rf-r-xs);
  }

  ::placeholder { color: var(--rf-ink-faint); }

  /* keep the scrollbar inside the dark world */
  * { scrollbar-color: var(--rf-hairline-strong) transparent; }
}