/**
 * SantriOS Design Tokens — Minimalist Monochrome System
 * Based on: designpromt.md (Editorial Luxury, Architectural Precision, Pure Monochrome)
 * Core Principle: Reduction to Essence. Zero shadows, 0px border-radius, high-contrast serif typography.
 */

:root {
  /* ==========================================================================
     1. Strict Monochrome Color System
     ========================================================================== */
  --background: #FFFFFF;          /* Pure white */
  --foreground: #000000;          /* Pure black */
  --muted: #F5F5F5;               /* Off-white for subtle backgrounds */
  --muted-foreground: #525252;    /* Dark gray for secondary text */
  --accent: #15803d;              /* Islamic Emerald Green accent */
  --accent-foreground: #FFFFFF;   /* White on green */
  --border: #000000;              /* Black borders */
  --border-light: #E5E5E5;        /* Light gray for subtle dividers */
  --card: #FFFFFF;                /* White cards */
  --card-foreground: #000000;     /* Black text */
  --ring: #15803d;                /* Green focus rings */

  /* Compatibility & Semantic Aliases */
  --color-primary: #15803d;
  --color-primary-hover: #166534;
  --color-primary-active: #14532d;
  --color-primary-light: #F0FDF4;
  --color-primary-border: #15803d;

  --color-accent-gold: #15803d;
  --color-accent-gold-hover: #166534;
  --color-accent-gold-light: #F0FDF4;
  --color-accent-gold-border: #15803d;

  --color-bg-canvas: #FFFFFF;
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #F5F5F5;
  --color-bg-hover: #EEEEEE;
  --color-bg-active: #E0E0E0;

  --color-text-main: #000000;
  --color-text-muted: #525252;
  --color-text-subtle: #737373;
  --color-text-inverse: #FFFFFF;

  --color-border: #000000;
  --color-border-strong: #000000;
  --color-border-focus: #15803d;

  /* Functional Status Colors */
  --color-success: #15803d;
  --color-success-bg: #F0FDF4;
  --color-success-border: #15803d;

  --color-warning: #B45309;
  --color-warning-bg: #FFFBEB;
  --color-warning-border: #B45309;

  --color-danger: #B91C1C;
  --color-danger-bg: #FEF2F2;
  --color-danger-border: #B91C1C;

  --color-info: #15803d;
  --color-info-bg: #F0FDF4;
  --color-info-border: #15803d;


  /* ==========================================================================
     2. Typography Stacks & Scale (Editorial Serif as Hero)
     ========================================================================== */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-arabic: "Amiri", "Scheherazade New", serif;

  /* Type Scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 2rem;       /* 32px */
  --text-4xl: 2.5rem;     /* 40px */
  --text-5xl: 3.5rem;     /* 56px */
  --text-6xl: 4.5rem;     /* 72px */
  --text-7xl: 6rem;       /* 96px */
  --text-8xl: 8rem;       /* 128px */
  --text-9xl: 10rem;      /* 160px */

  /* ==========================================================================
     3. Strict Sharp Border Radius (ALL 0px - NON-NEGOTIABLE)
     ========================================================================== */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-full: 0px;

  /* ==========================================================================
     4. Border Weights & Line System
     ========================================================================== */
  --border-hairline: 1px solid #E5E5E5;
  --border-thin: 1px solid #000000;
  --border-medium: 2px solid #000000;
  --border-thick: 4px solid #000000;
  --border-ultra: 8px solid #000000;

  /* ==========================================================================
     5. Shadows (NONE - 2D Flat Precision)
     ========================================================================== */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-button: none;

  /* ==========================================================================
     6. Motion Philosophy (Minimal & Instant, 0-100ms)
     ========================================================================== */
  --transition-fast: 100ms linear;
  --transition-normal: 100ms linear;

  --touch-target-min: 44px;
}

/* ==========================================================================
   Base & Global Textures
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0 !important; /* Strict 0px across all elements */
}

html {
  font-size: 16px;
  line-height: 1.625;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--background);
  color: var(--foreground);
}

body {
  font-family: var(--font-body);
  background-color: #FFFFFF;
  color: var(--foreground);
  min-height: 100vh;
  position: relative;
  background-image: none !important;
}

/* Headings: Playfair Display Serif as Hero */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--foreground);
  line-height: 1.15;
}

p, li, blockquote {
  font-family: var(--font-body);
  color: var(--muted-foreground);
}

strong, b {
  color: var(--foreground);
  font-weight: 700;
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
  border-radius: 0 !important;
}

a {
  color: var(--foreground);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover {
  text-decoration: underline;
}

/* Accessibility Focus States (designpromt.md Requirement) */
:focus-visible {
  outline: 3px solid var(--foreground) !important;
  outline-offset: 3px !important;
}

/* Heavy Section Divider Rules */
hr, .hr-thick {
  border: none;
  border-top: 4px solid var(--foreground);
  margin: 3rem 0;
}

.hr-ultra {
  border: none;
  border-top: 8px solid var(--foreground);
  margin: 4rem 0;
}

.hr-hairline {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 2rem 0;
}