/* =============================================================
   ACN Property Development — Design Tokens
   Colors, typography, spacing, and elevation primitives.
   ============================================================= */

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

:root {
  /* ----------------------------------------------------------
     COLOR — Surfaces
     Deep, cool, institutional. No warm tones, no gold.
     ---------------------------------------------------------- */
  --acn-navy-900:        #0d1b2a;   /* primary background */
  --acn-navy-800:        #142336;   /* elevated surface  */
  --acn-slate-700:       #1c2b3a;   /* secondary surface */
  --acn-slate-600:       #25364a;   /* hairline / card border on dark */
  --acn-ink-1000:        #060c14;   /* deepest shadow / pure-black substitute */

  /* ----------------------------------------------------------
     COLOR — Metallics (the only "brand color")
     ---------------------------------------------------------- */
  --acn-silver-100:      #e8e8e8;   /* highlight (specular) */
  --acn-silver-200:      #d4d4d4;   /* light silver */
  --acn-silver-300:      #c0c0c0;   /* primary silver — the accent */
  --acn-silver-400:      #a6a6a6;   /* mid silver */
  --acn-silver-500:      #888888;   /* deep silver / shadow */
  --acn-silver-gradient: linear-gradient(180deg, #e8e8e8 0%, #c0c0c0 45%, #888888 100%);

  /* ----------------------------------------------------------
     COLOR — Neutrals (text)
     ---------------------------------------------------------- */
  --acn-paper:           #f4f4f2;   /* off-white body text on dark */
  --acn-paper-dim:       #cfcfcd;   /* dimmed body text */
  --acn-gray-secondary:  #9a9a9a;   /* secondary text / captions */
  --acn-gray-tertiary:   #6e7480;   /* tertiary / disabled */

  /* ----------------------------------------------------------
     COLOR — Semantic (used sparingly; muted, never saturated)
     ---------------------------------------------------------- */
  --acn-success:         #6b8e7f;   /* aged eucalyptus */
  --acn-warning:         #b8a888;   /* warm beige — only allowed in data viz */
  --acn-danger:          #8e5b5b;   /* desaturated oxblood */
  --acn-info:            --acn-silver-300;

  /* ----------------------------------------------------------
     FOREGROUND TOKENS — semantic aliases
     ---------------------------------------------------------- */
  --acn-fg-1:            var(--acn-paper);          /* primary text on dark */
  --acn-fg-2:            var(--acn-paper-dim);      /* secondary text on dark */
  --acn-fg-3:            var(--acn-gray-secondary); /* captions, meta */
  --acn-fg-4:            var(--acn-gray-tertiary);  /* disabled */
  --acn-fg-accent:       var(--acn-silver-300);     /* numerals, accent links */
  --acn-fg-inverse:      var(--acn-navy-900);       /* text on light */

  --acn-bg-1:            var(--acn-navy-900);
  --acn-bg-2:            var(--acn-slate-700);
  --acn-bg-3:            var(--acn-navy-800);
  --acn-bg-inverse:      var(--acn-paper);

  --acn-border-hairline: rgba(192, 192, 192, 0.18);  /* default border on dark */
  --acn-border-strong:   rgba(192, 192, 192, 0.45);  /* hover / focus border */
  --acn-border-quiet:    rgba(192, 192, 192, 0.08);  /* barely-there division */

  /* ----------------------------------------------------------
     TYPOGRAPHY — Families
     ---------------------------------------------------------- */
  --acn-font-display:    'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --acn-font-label:      'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --acn-font-body:       'Inter', 'Helvetica Neue', Arial, sans-serif;
  --acn-font-mono:       'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Scale (px-based, never below 12pt for print)
     ---------------------------------------------------------- */
  --acn-text-display-1:  clamp(56px, 7vw, 96px);
  --acn-text-display-2:  clamp(40px, 5vw, 64px);
  --acn-text-h1:         clamp(32px, 3.4vw, 44px);
  --acn-text-h2:         clamp(26px, 2.6vw, 32px);
  --acn-text-h3:         20px;
  --acn-text-h4:         16px;
  --acn-text-body:       15px;
  --acn-text-body-lg:    17px;
  --acn-text-caption:    13px;
  --acn-text-label:      11px;   /* small caps — always letterspaced */
  --acn-text-micro:      10px;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Tracking & leading
     Display is wide-tracked & light. Labels are heavily tracked.
     Body is neutral.
     ---------------------------------------------------------- */
  --acn-tracking-display:  0.04em;
  --acn-tracking-heading:  0.06em;
  --acn-tracking-label:    0.22em;   /* DM Sans small caps */
  --acn-tracking-body:     0.005em;
  --acn-tracking-tight:    -0.01em;

  --acn-leading-display:   1.05;
  --acn-leading-heading:   1.18;
  --acn-leading-body:      1.55;
  --acn-leading-tight:     1.25;

  /* ----------------------------------------------------------
     SPACING — 4pt base, doubled at scale
     ---------------------------------------------------------- */
  --acn-space-1:   4px;
  --acn-space-2:   8px;
  --acn-space-3:   12px;
  --acn-space-4:   16px;
  --acn-space-5:   24px;
  --acn-space-6:   32px;
  --acn-space-7:   48px;
  --acn-space-8:   64px;
  --acn-space-9:   96px;
  --acn-space-10:  128px;

  /* ----------------------------------------------------------
     BORDERS — sharp, hairline, no radii
     ---------------------------------------------------------- */
  --acn-radius:       0px;          /* the brand has no rounded corners */
  --acn-hairline:     1px solid var(--acn-border-hairline);
  --acn-hairline-2:   1px solid var(--acn-border-strong);
  --acn-rule-thin:    1px;
  --acn-rule-medium:  2px;

  /* ----------------------------------------------------------
     ELEVATION — restrained; we use light rather than shadow
     ---------------------------------------------------------- */
  --acn-elev-0:  none;
  --acn-elev-1:  0 1px 0 0 var(--acn-border-quiet);
  --acn-elev-2:  0 12px 32px -16px rgba(0, 0, 0, 0.55);
  --acn-elev-3:  0 24px 60px -24px rgba(0, 0, 0, 0.70);

  /* Silver edge-glow (signature on hover) */
  --acn-glow-silver: 0 0 0 1px rgba(192, 192, 192, 0.45),
                     0 0 24px -6px rgba(192, 192, 192, 0.28),
                     inset 0 0 0 1px rgba(232, 232, 232, 0.04);

  /* ----------------------------------------------------------
     MOTION — slow, deliberate, never bouncy
     ---------------------------------------------------------- */
  --acn-ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --acn-ease-out:       cubic-bezier(0.16, 1, 0.30, 1);
  --acn-duration-1:     180ms;
  --acn-duration-2:     320ms;
  --acn-duration-3:     520ms;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --acn-content-max:    1280px;
  --acn-content-narrow: 880px;
  --acn-gutter:         clamp(20px, 4vw, 56px);
}

/* =============================================================
   ELEMENT DEFAULTS
   Apply these by giving the document `class="acn"` or by scoping.
   ============================================================= */

.acn {
  background: var(--acn-bg-1);
  color: var(--acn-fg-1);
  font-family: var(--acn-font-body);
  font-size: var(--acn-text-body);
  line-height: var(--acn-leading-body);
  letter-spacing: var(--acn-tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.acn-display-1,
.acn-display-2,
.acn h1, .acn h2, .acn h3 {
  font-family: var(--acn-font-display);
  font-weight: 300;
  letter-spacing: var(--acn-tracking-display);
  line-height: var(--acn-leading-display);
  color: var(--acn-fg-1);
  margin: 0;
}

.acn-display-1 { font-size: var(--acn-text-display-1); }
.acn-display-2 { font-size: var(--acn-text-display-2); }
.acn h1       { font-size: var(--acn-text-h1); line-height: var(--acn-leading-heading); }
.acn h2       { font-size: var(--acn-text-h2); line-height: var(--acn-leading-heading); }
.acn h3       { font-size: var(--acn-text-h3); font-family: var(--acn-font-body); font-weight: 500; letter-spacing: var(--acn-tracking-tight); }

.acn-eyebrow,
.acn-label {
  font-family: var(--acn-font-label);
  font-weight: 500;
  font-size: var(--acn-text-label);
  letter-spacing: var(--acn-tracking-label);
  text-transform: uppercase;
  color: var(--acn-fg-accent);
  display: inline-block;
}

.acn p,
.acn-body {
  font-family: var(--acn-font-body);
  font-weight: 400;
  font-size: var(--acn-text-body);
  line-height: var(--acn-leading-body);
  color: var(--acn-fg-2);
  margin: 0;
}

.acn-caption {
  font-family: var(--acn-font-body);
  font-size: var(--acn-text-caption);
  color: var(--acn-fg-3);
  line-height: 1.5;
}

.acn-rule {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--acn-silver-500) 12%,
    var(--acn-silver-300) 50%,
    var(--acn-silver-500) 88%,
    transparent 100%);
  border: 0;
  display: block;
}

.acn-rule--quiet {
  background: var(--acn-border-hairline);
}

/* =============================================================
   FOCUS — always visible, never decorative
   ============================================================= */
.acn :focus-visible {
  outline: 1px solid var(--acn-silver-300);
  outline-offset: 2px;
}

/* =============================================================
   SELECTION
   ============================================================= */
.acn ::selection {
  background: var(--acn-silver-300);
  color: var(--acn-navy-900);
}