/* =========================================================
   DESIGN TOKENS
   HANI MATMED — PERSONAL PORTFOLIO
   =========================================================

   This file contains the global design decisions used
   throughout the website.

   RULE:
   Components should use these tokens instead of hardcoding
   the same values repeatedly.

   This makes the design system easier to maintain and evolve.
   ========================================================= */


/* =========================================================
   01. COLOR SYSTEM
   ========================================================= */

:root {

  /* ---------------------------------------------------------
     LIGHT MODE
     --------------------------------------------------------- */

  /* Main website background */
  --color-background: #f5f5f7;

  /* Section / canvas background */
  --color-surface: #ffffff;

  /* Primary content color */
  --color-primary: #000000;

  /* Primary color at reduced emphasis */
  --color-primary-muted: rgb(0 0 0 / 64%);

  /* Secondary text */
  --color-secondary: #f5f5f7;

  /* Inactive UI elements */
  --color-inactive: rgb(0 0 0 / 12%);

  /* Pure white */
  --color-white: #ffffff;

  /* Pure black */
  --color-black: #000000;


  /* ---------------------------------------------------------
     DARK MODE
     ---------------------------------------------------------

     The dark system intelligently inverts the visual logic.
     The website background becomes dark, while elevated
     sections use pure black as their canvas.
     --------------------------------------------------------- */

  --dark-color-background: #1d1d1f;

  --dark-color-surface: #000000;

  --dark-color-primary: #ffffff;

  --dark-color-primary-muted: rgb(255 255 255 / 64%);

  --dark-color-secondary: #1d1d1f;

  --dark-color-inactive: rgb(255 255 255 / 12%);


  /* ---------------------------------------------------------
     TEMPORARY HERO GRADIENT
     ---------------------------------------------------------

     Placeholder only.
     This will be replaced when the actual hero visuals
     are finalized.
     --------------------------------------------------------- */

  --hero-gradient-bottom: #4a6994;
  --hero-gradient-top: #7894ba;


  /* ---------------------------------------------------------
     FOOTER TEXT
     ---------------------------------------------------------

     A subtle gray rather than introducing an unrelated
     arbitrary color.
     --------------------------------------------------------- */

  --color-footer-text: rgb(0 0 0 / 64%);
}


/* =========================================================
   02. CONTENT SYSTEM
   ========================================================= */

:root {

  /* Main desktop content width */
  --content-width: 1296px;

  /* Horizontal content padding */
  --content-padding: 10px;

  /* Full viewport width */
  --viewport-width: 100%;

}


/* =========================================================
   03. NAVIGATION
   ========================================================= */

:root {

  /* Navigation height */
  --navigation-height: 64px;

  /* Navigation horizontal padding */
  --navigation-padding-x: 10px;

  /* Navigation vertical padding */
  --navigation-padding-y: 24px;

}


/* =========================================================
   04. HERO
   ========================================================= */

:root {

  /* Desktop hero dimensions */
  --hero-width: 1440px;
  --hero-height: 810px;

  /* Hero slide count */
  --hero-slide-count: 3;

  /* Large navigation arrows */
  --control-icon-size: 64px;

  /* Small UI icon size */
  --small-icon-height: 16px;

  /* Hero indicator size */
  --indicator-size: 16px;

  /* Space between hero indicators */
  --indicator-gap: 16px;

}


/* =========================================================
   05. WORK SELECTION
   ========================================================= */

:root {

  /*
    Temporary section height.

    This is intentionally a token so we can change the
    relationship between the hero and work section later
    without touching the component itself.
  */
  --work-section-height: 600px;

  /* Gap between project cards */
  --project-gap: 24px;

  /* Project card height */
  --project-card-height: 450px;

  /* Project card width */
  --project-card-width: 360px;

  /* Project card aspect ratio */
  --project-card-ratio: 4 / 5;

}


/* =========================================================
   06. PROJECT CARD
   ========================================================= */

:root {

  /* Card corner radius */
  --card-radius-top: 64px;
  --card-radius-bottom: 48px;

  /*
    CSS does not provide Figma's "corner smoothing: 100%"
    as a universal standard property.

    We will reproduce the visual behavior through the
    actual shape/styling when we build the card.
  */

  /* Card shadow */
  --card-shadow-x: 0px;
  --card-shadow-y: 8px;
  --card-shadow-blur: 24px;
  --card-shadow-spread: 0px;
  --card-shadow-opacity: 12%;

  /* Card border */
  --card-border-width: 1px;

  /* Thumbnail aspect ratio */
  --thumbnail-ratio: 1 / 1;

  /* Thumbnail internal spacing */
  --thumbnail-padding: 10px;

}


/* =========================================================
   07. PROJECT CARD CONTENT
   ========================================================= */

:root {

  /* Content position inside card */
  --card-content-left: 24px;
  --card-content-top: 48px;

  /* Title / description gap */
  --card-content-gap: 4px;

  /* Content maximum width */
  --card-content-width: 220px;

}


/* =========================================================
   08. PROJECT ACTION
   ========================================================= */

:root {

  /* Button horizontal padding */
  --button-padding-x: 16px;

  /* Button vertical padding */
  --button-padding-y: 10px;

  /* Button border */
  --button-border-width: 1px;

  /* Fully rounded button */
  --button-radius: 999px;

}


/* =========================================================
   09. METADATA
   ========================================================= */

:root {

  /* Metadata spacing */
  --metadata-gap: 8px;

  /* Metadata internal padding */
  --metadata-padding-x: 10px;
  --metadata-padding-y: 10px;

}


/* =========================================================
   10. FOOTER
   ========================================================= */

:root {

  /* Temporary footer height */
  --footer-height: 128px;

  /* Footer inner vertical padding */
  --footer-padding-y: 24px;

  /* Footer inner horizontal padding */
  --footer-padding-x: 10px;

  /* Social icon gap */
  --social-gap: 8px;

}


/* =========================================================
   11. MOTION SYSTEM
   =========================================================

   Apple-inspired means restrained, not "everything moves
   because CSS discovered caffeine."

   We will use these values consistently throughout the site.
   ========================================================= */

:root {

  /* General interface transition */
  --transition-fast: 180ms;

  /* Standard interface transition */
  --transition-standard: 300ms;

  /* Larger visual transitions */
  --transition-smooth: 500ms;

  /* Hero / page transitions */
  --transition-page: 700ms;


  /* ---------------------------------------------------------
     EASING
     --------------------------------------------------------- */

  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);

  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

}


/* =========================================================
   12. Z-INDEX SYSTEM
   ========================================================= */

:root {

  /* Normal content */
  --z-content: 1;

  /* Cards / elevated UI */
  --z-elevated: 10;

  /* Navigation */
  --z-navigation: 100;

  /* Overlays / transitions */
  --z-overlay: 1000;

}


/* =========================================================
   13. TYPOGRAPHY SYSTEM
   =========================================================

   The Inter family will be loaded globally later.

   We are deliberately NOT locking the three Inter optical
   sizes here yet. We agreed to finalize the typography
   system professionally after the visual structure exists.
   ========================================================= */

:root {

  --font-primary: "Inter", sans-serif;

  /* Brand */
  --brand-size: 24px;

  /* Navigation */
  --navigation-text-size: 16px;

  /* Project title */
  --project-title-size: 28px;
  --project-title-line-height: 32px;

  /* Project description */
  --project-description-size: 13px;
  --project-description-line-height: 18px;

  /* Project action */
  --project-action-size: 16px;

  /* Project metadata */
  --project-meta-size: 11px;
  --project-meta-line-height: 16px;

}


/* =========================================================
   14. RESPONSIVE BREAKPOINTS
   =========================================================

   These are structural breakpoints, not design boundaries.

   The design should preserve relationships and proportions
   rather than simply shrinking every desktop measurement.
   ========================================================= */

:root {

  --breakpoint-tablet: 1024px;
  --breakpoint-mobile: 768px;
  --breakpoint-small-mobile: 480px;

}


/* =========================================================
   15. ACCESSIBILITY
   ========================================================= */

:root {

  /*
    Minimum recommended interaction target.

    Actual visual icons can remain 16px while their clickable
    container is larger.
  */
  --interaction-target: 44px;

}