/*
Theme Name: Ross Design Studio
Theme URI: https://rossdesignstudio.com
Author: Ross Design Studio
Description: Custom WordPress theme for Ross Design Studio — architecture & interior design portfolio. Built from the Claude Design handoff "Portfolio v2".
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ross-design-studio
*/

/* ============================================================
   Design tokens — ported from the Claude Design handoff
   (tokens/colors.css, typography.css, spacing.css, effects.css)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
  /* Base ramp */
  --paper:    #FCFAF6;
  --canvas:   #F9F6F0;
  --linen:    #EDE5D8;
  --sand:     #E2D6C3;
  --tan:      #C8B89A;
  --clay:     #9E8E78;
  --bark:     #5C4A35;
  --ink:      #2A221A;

  --line-soft:    rgba(42, 34, 26, 0.10);
  --line:         rgba(42, 34, 26, 0.16);
  --line-strong:  rgba(42, 34, 26, 0.28);
  --line-on-dark: rgba(249, 246, 240, 0.16);
  --ink-08:       rgba(42, 34, 26, 0.06);
  --ink-12:       rgba(42, 34, 26, 0.12);
  --tan-24:       rgba(200, 184, 154, 0.30);

  --bg:             var(--canvas);
  --bg-raised:      var(--paper);
  --surface:        var(--linen);
  --surface-accent: var(--tan);
  --surface-ink:    var(--ink);

  --text-primary:   var(--ink);
  --text-secondary: var(--clay);
  --text-accent:    var(--bark);
  --text-on-dark:   var(--canvas);
  --text-muted-on-dark: rgba(249, 246, 240, 0.62);

  --border:         var(--line-soft);
  --border-strong:  var(--line);
  --divider:        var(--sand);

  --accent:         var(--bark);
  --accent-hover:   var(--ink);
  --focus-ring:     var(--bark);
  --hover-wash:     var(--ink-08);
  --selection:      var(--tan-24);

  /* Typography */
  --font-serif: 'Cormorant Garamond', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  --text-display:  clamp(3.25rem, 6.5vw, 5.75rem);
  --text-h1:       clamp(2.25rem, 4vw, 3.5rem);
  --text-h2:       clamp(1.75rem, 2.6vw, 2.5rem);
  --text-h3:       1.5rem;
  --text-h4:       1.25rem;
  --text-body-lg:  1.1875rem;
  --text-body:     1.0625rem;
  --text-small:    0.9375rem;
  --text-caption:  0.8125rem;
  --text-label:    0.75rem;

  --leading-display: 1.04;
  --leading-tight:   1.14;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.72;

  --tracking-display: -0.015em;
  --tracking-tight:   -0.005em;
  --tracking-normal:  0;
  --tracking-label:   0.1em;
  --tracking-wide:    0.18em;

  /* Spacing */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  --gutter:          var(--space-5);
  --page-margin:     clamp(1.5rem, 6vw, 6rem);
  --section-gap:     clamp(4rem, 9vw, 10rem);
  --container-max:   1320px;
  --container-text:  64ch;

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  /* Effects */
  --border-width: 1px;
  --border-hairline: var(--border-width) solid var(--border);
  --border-visible:  var(--border-width) solid var(--border-strong);

  --shadow-none:   none;
  --shadow-soft:   0 1px 2px rgba(42, 34, 26, 0.04), 0 10px 30px rgba(42, 34, 26, 0.07);
  --shadow-raised: 0 4px 10px rgba(42, 34, 26, 0.06), 0 30px 70px rgba(42, 34, 26, 0.16);

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration:      400ms;
  --duration-slow: 720ms;

  --focus-outline: 2px solid var(--focus-ring);
  --focus-offset:  2px;

  --scrim-soft:  linear-gradient(180deg, rgba(42,34,26,0) 40%, rgba(42,34,26,0.55) 100%);
  --scrim-full:  linear-gradient(180deg, rgba(42,34,26,0.10), rgba(42,34,26,0.45));
  --media-bg:    var(--linen);
}

::selection { background: var(--tan-24); color: var(--ink); }