/* ---------------------------------------------------------
   ARAVEIL DESIGN SYSTEM
   Type, rules and controls for the redesigned surfaces. The
   navigation and pricing page use it first; the rest of the
   site moves onto it page by page. Colour still comes from
   each page's palette tokens, so both systems share one
   palette during the rollout.

   1. TOKENS
   2. TYPE PRIMITIVES
   3. LABELS AND RULES
   4. BUTTONS
   5. BASE TYPE (every page's reset defers type here)
   6. SITE COMPONENTS (.btn family, .eyebrow and the .has-dots
      background, kept as the class names the markup already uses)
   7. FOOTER (shared by every page)
   8. REDUCED MOTION
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------- */
:root {
    --ds-font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
    --ds-font-text: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
    --ds-font-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;

    --ds-line: color-mix(in srgb, var(--text-main) 11%, transparent);
    --ds-line-strong: color-mix(in srgb, var(--text-main) 24%, transparent);
    --ds-tint: color-mix(in srgb, var(--primary) 7%, transparent);
    --ds-hover: color-mix(in srgb, var(--text-main) 4%, transparent);

    --ds-radius: 2px;
    --ds-ease: cubic-bezier(0.2, 0.7, 0.1, 1);

    --ds-label-size: 0.6875rem;
    --ds-label-track: 0.14em;

    --ds-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");

    /* Dark text that stays readable on the amber accent in both themes. */
    --ds-on-accent: var(--text-main);

    /* Dot field (.has-dots). Light paper needs more ink than dark to read
       as the same quiet texture, so the light values are stronger. */
    --dots-ink: color-mix(in srgb, var(--text-main) 42%, transparent);
    --dots-accent: color-mix(in srgb, var(--primary) 80%, transparent);

    /* Plan colours: Free, Lite and Pro wherever plans are colour coded
       (the provider dialog, the model index and the model pages). */
    --plan-free: #15803D;
    --plan-lite: var(--primary);
    --plan-pro: #7C3AED;
}

[data-theme="dark"] {
    --ds-on-accent: var(--bg-body);
    --dots-ink: var(--ds-line-strong);
    --dots-accent: color-mix(in srgb, var(--primary) 55%, transparent);
    --plan-free: #4ADE80;
    --plan-pro: #A78BFA;
}

/* ---------------------------------------------------------
   2. TYPE PRIMITIVES
   Display type is set tight and lets optical sizing sharpen
   it as it grows; text type carries everything people read.
   --------------------------------------------------------- */
.ds-display {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-optical-sizing: auto;
    letter-spacing: -0.035em;
    line-height: 0.95;
    color: var(--text-main);
}

.ds-text {
    font-family: var(--ds-font-text);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---------------------------------------------------------
   3. LABELS AND RULES
   --------------------------------------------------------- */
.ds-label {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-label-size);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: var(--ds-label-track);
    text-transform: uppercase;
    color: var(--text-muted);
}
.ds-label-accent { color: var(--primary); }

.ds-index { display: inline-flex; align-items: center; gap: 0.75rem; }
.ds-index::after { content: ""; width: 2.5rem; height: 1px; background: var(--ds-line-strong); }

/* ---------------------------------------------------------
   4. BUTTONS
   Square, mono-set and quiet; the arrow carries the motion.
   --------------------------------------------------------- */
.ds-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
    min-height: 44px; padding: 0 1.25rem;
    border: 1px solid transparent; border-radius: var(--ds-radius);
    font: 500 0.75rem/1 var(--ds-font-mono); letter-spacing: 0.12em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ds-btn-arrow { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.25s var(--ds-ease); }
.ds-btn:hover .ds-btn-arrow { transform: translateX(3px); }

.ds-btn-ink { background: var(--text-main); color: var(--bg-body); }
.ds-btn-ink:hover { background: color-mix(in srgb, var(--text-main) 86%, var(--bg-body)); }

.ds-btn-line { background: transparent; color: var(--text-main); border-color: var(--ds-line-strong); }
.ds-btn-line:hover { border-color: var(--text-main); }

.ds-btn-accent { background: var(--primary); color: var(--ds-on-accent); }
.ds-btn-accent:hover { background: color-mix(in srgb, var(--primary) 88%, var(--ds-on-accent)); }

/* ---------------------------------------------------------
   5. BASE TYPE
   --------------------------------------------------------- */
body { font-family: var(--ds-font-text); }

h1, h2, h3, h4 {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-optical-sizing: auto;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text-main);
}

::selection { background: color-mix(in srgb, var(--primary) 26%, transparent); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 0; }

.skip-link {
    border-radius: var(--ds-radius);
    font: 500 0.72rem/1 var(--ds-font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---------------------------------------------------------
   6. SITE COMPONENTS
   --------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
    min-height: 46px; padding: 0 1.35rem;
    border: 1px solid transparent; border-radius: var(--ds-radius);
    font: 500 0.75rem/1 var(--ds-font-mono); letter-spacing: 0.12em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.25s var(--ds-ease); }
.btn:hover svg { transform: translateX(3px); }

/* Primary buttons without their own icon get the system arrow. */
.btn-primary:not(:has(svg))::after,
.btn-accent:not(:has(svg))::after {
    content: ""; width: 14px; height: 14px; flex-shrink: 0; background: currentColor;
    -webkit-mask: var(--ds-arrow) center / contain no-repeat; mask: var(--ds-arrow) center / contain no-repeat;
    transition: transform 0.25s var(--ds-ease);
}
.btn:hover::after { transform: translateX(3px); }

.btn-primary { background: var(--text-main); color: var(--bg-body); }
.btn-primary:hover { background: color-mix(in srgb, var(--text-main) 86%, var(--bg-body)); }

.btn-secondary { background: transparent; color: var(--text-main); border-color: var(--ds-line-strong); }
.btn-secondary:hover { border-color: var(--text-main); }

.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text-main); background: var(--ds-hover); }

.btn-accent { background: var(--primary); color: var(--ds-on-accent); }
.btn-accent:hover { background: color-mix(in srgb, var(--primary) 88%, var(--ds-on-accent)); }

/* Section label: mono, tracked, amber, closed by a short rule. */
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.75rem;
    margin-bottom: 1.25rem; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    font: 500 var(--ds-label-size)/1.2 var(--ds-font-mono);
    letter-spacing: var(--ds-label-track); text-transform: uppercase; color: var(--primary);
}
.eyebrow::after { content: ""; width: 2.5rem; height: 1px; background: var(--ds-line-strong); }

/* Plan colour coding: any element tagged data-plan gets --plan for its marks. */
[data-plan="free"] { --plan: var(--plan-free); }
[data-plan="lite"] { --plan: var(--plan-lite); }
[data-plan="pro"] { --plan: var(--plan-pro); }

/* Dot field: a faint grid of dots behind a section, fading out from one point,
   with every sixth dot picked out in amber. Add .has-dots to the section and
   choose where the field gathers with data-dots (defaults to the top right). */
.has-dots { position: relative; isolation: isolate; }
.has-dots::before {
    --dots-at: 88% 12%;
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(circle at 1px 1px, var(--dots-accent) 1.25px, transparent 0) 44px 66px / 132px 132px,
        radial-gradient(circle at 1px 1px, var(--dots-ink) 1px, transparent 0) 0 0 / 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 62% 80% at var(--dots-at), #000 10%, transparent 80%);
    mask-image: radial-gradient(ellipse 62% 80% at var(--dots-at), #000 10%, transparent 80%);
    opacity: 0.85;
    animation: dots-breathe 9s ease-in-out infinite alternate;
}
.has-dots[data-dots="top-left"]::before { --dots-at: 10% 12%; }
.has-dots[data-dots="bottom-left"]::before { --dots-at: 8% 90%; }
.has-dots[data-dots="bottom-right"]::before { --dots-at: 92% 88%; }
.has-dots[data-dots="right"]::before { --dots-at: 96% 50%; }
.has-dots[data-dots="center"]::before { --dots-at: 50% 60%; }
@keyframes dots-breathe { from { opacity: 0.55; } to { opacity: 0.95; } }

/* ---------------------------------------------------------
   7. FOOTER
   --------------------------------------------------------- */
.site-footer { position: relative; margin-top: 6rem; padding-bottom: 2rem; overflow: hidden; }
.site-footer > .container, .footer-inner { position: relative; z-index: 1; }
.footer-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.footer-decor svg { width: 100%; height: 100%; }

.footer-watermark {
    position: relative; margin: 0 0 -0.08em;
    font-family: var(--ds-font-display); font-weight: 600; font-optical-sizing: auto;
    font-size: clamp(6rem, 21vw, 19rem); line-height: 0.8; letter-spacing: -0.06em;
    text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
    background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-body) 85%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.footer-top {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem;
    padding: 3rem 0 3.5rem; border-top: 1px solid var(--text-main);
}
.footer-logo { display: inline-block; margin-bottom: 1.5rem; }
.footer-logo-img { height: 28px; width: auto; display: block; }
.footer-logo-img.dark, [data-theme="dark"] .footer-logo-img.light { display: none; }
[data-theme="dark"] .footer-logo-img.dark { display: block; }
.footer-tagline { max-width: 30rem; margin-bottom: 1.75rem; font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); }

.footer-socials { display: flex; gap: 0.5rem; }
.footer-social {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius); color: var(--text-muted);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-social svg { width: 16px; height: 16px; }
.footer-social:hover { color: var(--text-main); border-color: var(--text-main); }

.footer-cta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.footer-cta-title {
    max-width: 26rem; margin-bottom: 1.75rem;
    font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -0.035em; color: var(--text-main);
}

.footer-links {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem;
    padding: 2.5rem 0 3rem; border-top: 1px solid var(--ds-line);
}
.footer-col h4 {
    margin-bottom: 1.25rem; font: 500 var(--ds-label-size)/1.2 var(--ds-font-mono);
    letter-spacing: var(--ds-label-track); text-transform: uppercase; color: var(--text-muted);
}
.footer-col a {
    display: block; width: fit-content; margin-bottom: 0.8rem;
    font-size: 0.95rem; color: var(--text-main); text-decoration: none;
    background: linear-gradient(var(--primary), var(--primary)) left bottom / 0 1px no-repeat;
    transition: background-size 0.3s var(--ds-ease);
}
.footer-col a:hover { background-size: 100% 1px; }

.footer-bottom {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap;
    padding-top: 1.5rem; border-top: 1px solid var(--ds-line);
    font: 500 var(--ds-label-size)/1.4 var(--ds-font-mono); letter-spacing: var(--ds-label-track);
    text-transform: uppercase; color: var(--text-muted);
}

@media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 0 3rem; }
    .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
@media (max-width: 640px) {
    .footer-links { gap: 1.75rem 1.25rem; padding: 2.25rem 0 2.5rem; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
    .footer-links { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   8. REDUCED MOTION
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ds-btn, .ds-btn-arrow, .btn, .btn svg, .btn::after, .footer-col a { transition: none; }
    .has-dots::before { animation: none; }
}