/* Brutalism design system for Tailwind CSS v4. Load the fonts: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tinos:wght@400;500;700&family=Cousine:wght@400;700&display=swap"> */
@import "tailwindcss";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *, .dark, .dark *));

:root {
  --background:            #ffffff;
  --foreground:            #000000;
  --body:                  #000000;
  --surface:               #ffffff;
  --surface-foreground:    #000000;
  --muted:                 #e9e9e9;
  --muted-foreground:      #666666;
  --border:                #00000024;
  --border-strong:         #00000047;
  --input:                 #00000024;
  --input-background:      #ffffff;
  --ring:                  #006eb8;
  --primary:               #006eb8;
  --primary-foreground:    #ffffff;
  --secondary:             #e9e9e9;
  --secondary-foreground:  #000000;
  --accent:                #006eb8;
  --accent-foreground:     #ffffff;
  --inverse:               #000000;
  --inverse-foreground:    #ffffff;
  --inverse-muted:         #9e9e9e;
  --inverse-border:        #ffffff29;
  --destructive:           #dd4027;
  --destructive-foreground: #ffffff;
}
[data-theme="dark"], .dark {
  --background:            #000000;
  --foreground:            #ffffff;
  --body:                  #e0e0e0;
  --surface:               #0f0f0f;
  --surface-foreground:    #ffffff;
  --muted:                 #1a1a1a;
  --muted-foreground:      #9e9e9e;
  --border:                #ffffff24;
  --border-strong:         #ffffff42;
  --input:                 #ffffff33;
  --input-background:      #0d0d0d;
  --ring:                  #006eb8;
  --primary:               #006eb8;
  --primary-foreground:    #ffffff;
  --secondary:             #1f1f1f;
  --secondary-foreground:  #ffffff;
  --accent:                #006eb8;
  --accent-foreground:     #ffffff;
  --inverse:               #ffffff;
  --inverse-foreground:    #000000;
  --inverse-muted:         #616161;
  --inverse-border:        #00000029;
  --destructive:           #e15741;
  --destructive-foreground: #111111;
}

@theme inline {
  --color-background:            var(--background);
  --color-foreground:            var(--foreground);
  --color-body:                  var(--body);
  --color-surface:               var(--surface);
  --color-surface-foreground:    var(--surface-foreground);
  --color-muted:                 var(--muted);
  --color-muted-foreground:      var(--muted-foreground);
  --color-border:                var(--border);
  --color-border-strong:         var(--border-strong);
  --color-input:                 var(--input);
  --color-input-background:      var(--input-background);
  --color-ring:                  var(--ring);
  --color-primary:               var(--primary);
  --color-primary-foreground:    var(--primary-foreground);
  --color-secondary:             var(--secondary);
  --color-secondary-foreground:  var(--secondary-foreground);
  --color-accent:                var(--accent);
  --color-accent-foreground:     var(--accent-foreground);
  --color-inverse:               var(--inverse);
  --color-inverse-foreground:    var(--inverse-foreground);
  --color-inverse-muted:         var(--inverse-muted);
  --color-inverse-border:        var(--inverse-border);
  --color-destructive:           var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
}

@theme {
  --color-pale-king-s-blue:      #a7d4e4;
  --color-blue:                  #006eb8;
  --font-display:                Tinos, "Times New Roman", Times, serif;
  --font-body:                   Tinos, "Times New Roman", Times, serif;
  --font-alt:                    Cousine, "Courier New", Courier, monospace;
  --text-display:                clamp(56px, 1.72rem + 7.28vw, 132.48px);
  --text-display--line-height:   0.9;
  --text-display--letter-spacing: -0.035em;
  --text-display--font-weight:   400;
  --text-h2:                     clamp(59px, 3.15rem + 2.2vw, 82.14px);
  --text-h2--line-height:        0.9;
  --text-h2--letter-spacing:     -0.035em;
  --text-h2--font-weight:        400;
  --text-h3:                     clamp(26px, 1.39rem + 0.95vw, 36px);
  --text-h3--line-height:        1;
  --text-h3--letter-spacing:     -0.02em;
  --text-h3--font-weight:        700;
  --text-lead:                   clamp(20px, 1.19rem + 0.27vw, 22.8px);
  --text-lead--line-height:      1.3;
  --text-lead--letter-spacing:   0em;
  --text-lead--font-weight:      400;
  --text-body:                   clamp(18px, 1.1rem + 0.1vw, 19px);
  --text-body--line-height:      1.3;
  --text-body--letter-spacing:   0em;
  --text-body--font-weight:      400;
  --text-small:                  14px;
  --text-small--line-height:     1.2;
  --text-small--letter-spacing:  0em;
  --text-small--font-weight:     400;
  --text-eyebrow:                15.2px;
  --text-eyebrow--line-height:   1.3;
  --text-eyebrow--letter-spacing: 0.04em;
  --text-eyebrow--font-weight:   500;
  --spacing:                     0.25rem;
  --container-page:              1360px;
  --radius-sm:                   0px;
  --radius-md:                   0px;
  --radius-lg:                   0px;



}

@utility container-page { max-width: var(--container-page); margin-inline: auto; padding-inline: 32px; }
@utility section-y { padding-block: clamp(64px, 3.26rem + 3.05vw, 96px); }
@utility duration-base { transition-duration: 300ms; }

@layer base {
  body { background: var(--color-background); color: var(--color-body); font-family: var(--font-body); }
  h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-foreground); }
}